What to do if html images are distorted

html Solution to image distortion: First open the corresponding HTML file; then find the image introduced by HTML img; finally, add the "object-fit:none;" attribute to the img image to solve the image distortion problem. .

The operating environment of this article: Windows7 system, HTML5&&CSS3 version, Dell G3 computer.

CSS style width: 100% image distortion

The screen is 1920 pixels, set the width of img: 1920px fixed size, the image is not distorted, set width: 100% image distortion

img{
      display:block;  /*img图片比父元素高度小几个像素，设置为块元素，使得父子div高度一致*/
      width:100%;
}

Solve the problem of image distortion caused by setting width: 100% in order to make the picture adapt to the screen size

object-fit: none;    /*保留原有元素内容的长度和宽度*/

If the effect is not obvious, you can select a picture with text, which can be seen well There is a sharpness difference

img{
      width:100%;
      max-width:100%;
      object-fit:none;
}

But please note that after setting object-fit:none, when the screen size is smaller than the picture size, the picture will be automatically cropped to the middle position

[Recommended learning: HTML video tutorial】

The above is the detailed content of What to do if html images are distorted. For more information, please follow other related articles on the PHP Chinese website!