Solution of img distortion in css

This article mainly shows you the "solution to img distortion in css", which is easy to understand and clear. I hope it can help you solve your doubts. Let me lead you to study and learn the solution to img distortion in css.

Solutions to css img distortion: 1, open the corresponding css file; 2, by setting "object-fit:none;" to retain the length and width of the original element content.

This article operating environment: windows7 system, HTML5&&CSS3 version, Dell G3 computer.

What about css img distortion?

CSS style width:100% picture distortion

Screen 1920 pixels, set img width:1920px fixed size, picture does not distort, set width:100% picture distortion

Img {display:block; / * img image is a few pixels smaller than the parent element and is set as a block element to make the parent and child div highly consistent * / width:100%;}

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

Object-fit: none; / * keep the length and width of the original element content * /

If the effect is not obvious, you can choose a picture with text, you can see the difference in clarity.

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

Note, however, that when object-fit:none is set, when the screen size is smaller than the picture size, the picture will be automatically cropped to the middle position.

The above is all the contents of this article entitled "Solutions to img distortion in css". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!