So verhindern Sie das Strecken und Anpassen von Bildern in JS-js-Tutorial-php.cn

So verhindern Sie das Strecken und Anpassen von Bildern in JS

php中世界最好的语言

Freigeben： 2018-04-13 14:11:46

Original

2230 Leute haben es durchsucht

Dieses Mal zeige ich Ihnen, wie Sie verhindern können, dass sich das Bild mit JS ausdehnt und anpasst. Welche Vorsichtsmaßnahmen es gibt, die verhindern, dass JS sich an das Bild anpasst Fall, werfen wir einen Blick darauf.

Vorwort

Ich glaube, dass man in der täglichen Webentwicklung als Frontend oft auf Probleme mit der Bilddehnung stößt.

Beispielsweise sind Banner, Bild- und Textlisten, Avatare usw. Orte, an denen Benutzer oder Kunden Bilder unabhängig voneinander hochladen können. Wenn es um Bilder geht, ist natürlich das manuelle Zuschneiden erforderlich Durch das Hochladen von Bildern können Benutzer oder Kunden klar erkennen, dass der effektive Inhalt des Bildes die optimale Lösung ist. Wenn jedoch kein Zuschnitt erfolgt, muss er auf dem Front-End-Display verarbeitet werden Die Anforderungen beim Hochladen von Bildern jeder Größe sind unter den gegebenen Umständen erforderlich.

Wie viele Schritte sind nötig, um das Bild in den Rahmen zu setzen? Drei Schritte... Fangen wir an

Schritt eins: Zeichnen Sie zuerst einen Rahmen (hier ist eine Methode für adaptive Rahmen)

// 假定需要一个在750px屏幕下宽400px，高280px的盒子
// 宽度 = 400 / 750 = 0.5333
// 高度 = 280 / 400 * 0.5333 = 0.3733
<style>
 .img-box{
  position: relative;
  width: 53.33%;
  height: 0;
  padding-bottom: 37.33%;
  overflow: hidden;
  background-color: #eee;
 }
</style>
<body>
 <p id="list">
  <p class="img-box">
   <img src="..."/>
  </p>
 </p>
</body>

Nach dem Login kopieren

Schritt 2: Legen Sie das für das Bild benötigte CSS fest

<style>
 .width{
  position: absolute !important;
  width: 100% !important;
  min-height: 100% !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  -ms-transform: translateY(-50%) !important;
  -moz-transform: translateY(-50%) !important;
  -webkit-transform: translateY(-50%) !important;
  -o-transform: translateY(-50%) !important;
  display: block;
 }
 .height{
  position: absolute !important;
  height: 100% !important;
  min-width: 100% !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  -ms-transform: translateX(-50%) !important;
  -moz-transform: translateX(-50%) !important;
  -webkit-transform: translateX(-50%) !important;
  -o-transform: translateX(-50%) !important;
  display: block;
 }
</style>

Nach dem Login kopieren

Schritt 3: js ruft den Bildhöhenvergleich ab und fügt img einen Klassennamen hinzu

//需要注意的是，不能在css中直接给img设置宽度和高度
//否则在img.onload后获取的宽高是css设置的宽高
//同时建议使用dom对象来获取img标签
<script>
 var list = document.getElementById('list');
 getImgWH ( list );
 //执行宽高比对并设置img类名
 function getImgWH ( Obj ) {
  var img = Obj.getElementsByTagName('img');
  for( var i=0 ; i<img.length ; i++ ){
   img[i].onload = function(){
    var width = this.width;
    var height = this.height;
    if ( width > height ) {
     this.classList.add('height');
    } else if ( width < height ) {
     this.classList.add(&#39;width&#39;);
    } else {
     this.style.width = &#39;100%&#39;;
     this.style.height = &#39;100%&#39;;
    }
   }
  }
 }
</script>

Nach dem Login kopieren

Es ist relativ einfach, zu verhindern, dass Bilder gestreckt werden, aber in tatsächlichen Projekten muss dem ausreichend Aufmerksamkeit geschenkt werden. Eine Webseite wird zu einem Bild oder einem Fehler. Wenn das Bild gestreckt wird, wartet es einfach darauf, dass sich der Designer darum kümmert Darüber, hahahaha...

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Wenn der übergeordnete Knoten in Jstree ausgewählt wird, wird auch die Deaktivierung untergeordneter Knoten ausgewählt

Benutzerdefinierter Paginator in Swiper Detaillierte Erklärung der Verwendungsschritte

Das obige ist der detaillierte Inhalt vonSo verhindern Sie das Strecken und Anpassen von Bildern in JS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!