A brief discussion on how to implement bootstrap responsive images

This article will introduce to you bootstrapHow to implement responsive images. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to everyone.

Related tutorial recommendations: "bootstrap Tutorial"

Two common forms of responsive images in project applications :

are: the screen size changes, and the picture layout changes accordingly. In order to adapt to the conversion between PC and mobile devices, two sets of image resources are used.

1: The screen size changes, and the picture layout changes accordingly

<div>
       <div>
           <div>
               <img  class="img-responsive center-block lazy" src="/static/imghwm/default1.png" data-src="img/box-logo.png" alt="A brief discussion on how to implement bootstrap responsive images" >
           </div>
           <div>
            <img  class="img-responsive center-block lazy" src="/static/imghwm/default1.png" data-src="img/google-logo.png" alt="A brief discussion on how to implement bootstrap responsive images" >
            </div>
            <div>
                <img  class="img-responsive center-block lazy" src="/static/imghwm/default1.png" data-src="img/intuit-logo.png" alt="A brief discussion on how to implement bootstrap responsive images" >
            </div>
            <div>
                <img  class="img-responsive center-block lazy" src="/static/imghwm/default1.png" data-src="img/square-logo.png" alt="A brief discussion on how to implement bootstrap responsive images" >
            </div>
        </div>
   </div>

Effect:

1. Larger than the desktop picture (>996px)

2. Tablet (>768px
3. Mobile phone (
2: In order to adapt to the conversion between PC and mobile devices, Using two sets of image resources

<div>
       <img  class="visible-xs img-responsive lazy" src="/static/imghwm/default1.png" data-src="1.jpg" alt="A brief discussion on how to implement bootstrap responsive images" >
       <img  class="hidden-xs img-responsive lazy" src="/static/imghwm/default1.png" data-src="2.jpg" alt="A brief discussion on how to implement bootstrap responsive images" >
   </div>

Two sets of image resources will help prevent page lags and save traffic.

For more programming-related knowledge, please visit: Programming Teaching! !

The above is the detailed content of A brief discussion on how to implement bootstrap responsive images. For more information, please follow other related articles on the PHP Chinese website!