suchen

Heim >Web-Frontend >js-Tutorial >So verhindern Sie das Strecken und Anpassen von Bildern in JS

So verhindern Sie das Strecken und Anpassen von Bildern in JS

php中世界最好的语言
php中世界最好的语言Original
2018-04-13 14:11:462255Durchsuche

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>

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>

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>

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!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Ausführliche Erläuterung der Verwendung von Vue-FilternNächster Artikel：Ausführliche Erläuterung der Verwendung von Vue-Filtern

In Verbindung stehende Artikel

Mehr sehen