How to achieve adaptive image size

Image size adaptation

We can easily implement image adaptation through bootstrap:

<img class="img-responsive lazy"  src="/static/imghwm/default1.png"  data-src="..."    alt="Pic">

If you do not intend to reference bootstrap, simply css, we can check the definition of the img-responsive class in bootstrap:

.img-responsive {    
    display: inline-block;    
    height: auto;    
    max-width: 100%;}

In this way, we use pure CSS to complete the image adaptation;
Explain the code: display allows the image to be presented in a restrained form. And the width and height can be set;
Then use max-width to set the width, which can override the settings of the width attribute of the label by other classes; height makes the height of the picture adaptive, and can also be set in reverse, but this is generally the case More appear.

The above is the detailed content of How to achieve adaptive image size. For more information, please follow other related articles on the PHP Chinese website!