So erreichen Sie mit CSS eine proportionale Skalierung von Bildern ohne Verformung (Codebeispiel)

Wir müssen Bilder bei der Arbeit oft skalieren, aber durch eine gewisse Skalierung wird das Bild verformt. Deshalb werde ich Ihnen heute vorstellen. Wie Sie mit CSS eine proportionale Skalierung von Bildern ohne Verformung erreichen. Freunde, die lernen CSS, beeilen Sie sich. Kommen Sie und probieren Sie es aus!

Der folgende Code zeigt Ihnen, wie Sie mit CSS die Bildgröße ohne Verformung reduzieren können. Der spezifische Code lautet wie folgt:

<img src="../images/bg1.jpg" alt="" />
      img {
           /*等宽缩小不变形*/
           /*width: 100%;*/
           /*二选一*/
           /*等高缩小不变形*/
           height: 100%;
       }

Ergänzung: CSS steuert die Größe des Bild ohne Verformung

Methode 1. (Nicht schlecht, ich verwende es jetzt)

img {max-width:630px;myimg:expression_r(onload=function(){this.style.width=(this.offsetWidth > 630)?"630px":"auto"});}

Stellen Sie die maximale Breite auf 630 Pixel ein, stellen Sie die Bildbreite auf 630 ein . Die Höhe schrumpft mit dem Verhältnis, ohne dass es zu einer Bildverformung kommt.

Methode 2

img,a img{
border:0;
margin:0;
padding:0;
max-width:590px;
width:e-xpression(this.width>590?"590px":this.width);
max-height:590px;
height:e-xpression(this.height>590?"590px":this.height);
}

Methode 3

div img {
max-width:600px;
width:600px;
width:expression(document.body.clientWidth>600?”600px”:”auto”);
overflow:hidden;
}

max-width: 600px; Die Breite beträgt 600 Pixel in IE7, FF und anderen Nicht-IE-Browsern. Aber es funktioniert nicht im IE6.

width:600px; Die Bildgröße beträgt in allen Browsern 600px;

Wenn die Bildgröße größer als 600px ist, wird sie automatisch auf 600px reduziert. Gültig in IE6.

overflow:hidden; Blenden Sie den überschüssigen Teil aus, um Dehnungen und Verformungen zu vermeiden, die durch mangelnde Kontrolle der Bildgröße verursacht werden.

4. Wenn Sie die Höhe und Breite des Bildes so einstellen möchten, dass sie einen bestimmten festen Wert nicht überschreiten, müssen Sie das Bild auf diese Größe verkleinern, wenn die Höhe oder Breite des Bildes diesen Wert überschreitet.

(1) Für moderne Browser wie Firefox oder IE7 und höher verwenden Sie einfach direkt die CSS-Eigenschaften „max-width“ und „max-height“.

(2) Für IE 6.0 und niedriger werden die beiden oben genannten CSS-Eigenschaften ignoriert. Um mit solchen Dingen vorzugehen, verwenden wir oft Javascript und fügen dann Onload-Ereignisse zu den Bildern hinzu. Zum Beispiel:

<imgsrc="..."alt="..."onload="resizeImage(this)"/>
<script type="text/javascript">
　　functionresizeImage(obj){
　　obj.width=obj.width>50&&obj.width>obj.height?50:auto;
　　obj.height=obj.height>50?50:auto;
　　}
</script>

Zusammenfassung: Das Obige ist der vom Herausgeber eingeführte CSS-Beispielcode, um den gleichen Anteil an Bildern ohne Verformung zu erreichen Bitte teilen Sie uns dies mit. Ich hinterlasse eine Nachricht und der Herausgeber wird Ihnen rechtzeitig antworten. Ich möchte mich auch bei Ihnen allen für Ihre Unterstützung der chinesischen PHP-Website bedanken!

Das obige ist der detaillierte Inhalt vonSo erreichen Sie mit CSS eine proportionale Skalierung von Bildern ohne Verformung (Codebeispiel). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!