Home > Web Front-end > JS Tutorial > body text

How to achieve adaptive image size

一个新手
Release: 2017-09-20 09:50:25
Original
3644 people have browsed it


Image size adaptation

We can easily implement image adaptation through bootstrap:

<img src="..." class="img-responsive" alt="Pic">
Copy after login

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%;}
Copy after login

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!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!