suchen

Heim  >  Artikel  >  Web-Frontend  >  Adaptive Verarbeitungsmethode in Javascript

Adaptive Verarbeitungsmethode in Javascript

亚连
亚连Original
2018-06-15 14:11:412975Durchsuche

Dieser Artikel stellt Ihnen hauptsächlich die adaptive Verarbeitungsmethode zur Verhinderung von Bilddehnungen vor. Der Artikel stellt sie ausführlich anhand von Beispielcode vor. Es hat einen gewissen Referenz-Lernwert für alle, die es brauchen. Lasst uns lernen unten zusammen.

Vorwort

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

Banner, Bild- und Textlisten, Avatare usw. sind beispielsweise alles Orte, an denen Benutzer oder Kunden Bild-Uploads selbstständig durchführen können Beim Hochladen des Bildes ist ein manueller Vorgang erforderlich, damit Benutzer oder Kunden den effektiven Inhalt des Bildes klar erkennen können. Wenn das Zuschneiden jedoch nicht erfolgt, muss es bearbeitet werden Das Front-End-Display erfüllt die Anforderungen an optimale Anzeigeeffekte beim Hochladen von Bildern jeder Größe.

Zu diesem Zeitpunkt müssen wir die extremen Auswirkungen berücksichtigen, wie unten gezeigt:

Und wir Der gewünschte Effekt ist so------

In wie vielen Schritten müssen Sie das Bild einfügen? der Rahmen? 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 einen Klassennamen zu img hinzu

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

Das Obige habe ich für Sie zusammengestellt. Ich hoffe, es wird Ihnen in Zukunft hilfreich sein.

Verwandte Artikel:

Melden von 404-Problemen bezüglich Vue-Projektressourcendateien im Webpack (ausführliches Tutorial)

In vue.js How to Integrieren Sie VUX, um Pull-Up-Laden und Pull-Down-Aktualisierung zu erreichen

Wie verwende ich Gulp, um die Modularisierung statischer Webseiten zu implementieren?

Verwenden Sie js, um WeChat zu implementieren und Alipay zum Erhalt roter Umschläge aufzurufen (ausführliche Anleitung)

So verwenden Sie jqprint zum Drucken von Seiteninhalten

Das obige ist der detaillierte Inhalt vonAdaptive Verarbeitungsmethode in Javascript. 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：Über die Verwendung von Filtern in VueNächster Artikel：Über die Verwendung von Filtern in Vue

In Verbindung stehende Artikel

Mehr sehen