How to achieve proportional scaling of images without deformation using CSS (code example)

We often need to scale images at work, but some scaling will deform the image, so today I will introduce to you How to use CSS to achieve equal proportion scaling of images without deformation. Friends who are learning CSS, hurry up Come and check it out!

The following code will introduce to you how to use CSS to reduce the image size without deformation. The specific code is as follows:

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

Supplement: CSS controls the size of the image without deformation

Method 1. (Not bad, I am using it)

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

Set the maximum width to 630px. If it is greater than 630, set the image width to 630. The height will shrink with the proportion and will not cause the image to be deformed

Method 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);
}

Method 3

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

max-width:600px; The maximum width is 600px in IE7, FF and other non-IE browsers. But it doesn't work in IE6.

width:600px; The size of the image is 600px in all browsers;

When the image size is larger than 600px, it will be automatically reduced to 600px. Valid in IE6.

overflow:hidden; Hide the excess part to avoid stretching and deformation caused by failure to control the image size.

4. If you want to set the height and width of the image to not exceed a certain fixed value, you need to scale the image down to this size when the height or width of the image exceeds this value.

(1) For modern browsers, such as Firefox or IE7 and above, just use the max-width and max-height CSS properties directly.

(2) For IE 6.0 and below, the above two CSS properties will not be ignored. To deal with this kind of thing before, we often resorted to Javascript and then added onload events to the images. For example:

<img src="/static/imghwm/default1.png"  data-src="..."  class="lazy"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>

Summary: The above is the example code introduced by the editor to achieve the same proportion of images without deformation using CSS. I hope it will be helpful to you. If you have any questions, please contact us. I'll leave a message and the editor will reply to you in time. I would also like to thank you all for your support of the PHP Chinese website!

The above is the detailed content of How to achieve proportional scaling of images without deformation using CSS (code example). For more information, please follow other related articles on the PHP Chinese website!