When learning about the bootstrap Carousel module, I learned that the carousel images were placed in IMG under the class name item.
In the video teacher to the picture adaptive adoption to the picture img set width=100% complete, but such adaptive processing picture in different screen effect is different, big screen effect is very bad. Like what
Such a picture,
For the image adaptive setting width=100%, The effect is shown in the wide 1920px.
Obviously, because the picture is set to a width of 100%, most of its content is truncated and the display is very bad.
I thought about it later. Is there any way to make the picture really adaptive and center it, then think of css3 background picture attribute background-size. A small modification of the wheel bootstrap broadcast component is started.
Discard the IMG tag under item class, replace with Div, and set width:100%;height:100% for it; Background-size:contain;
The above code effect is like this
The contents are all displayed, but the picture is not centered on the big screen. This is simple, then set the background-position:cenetr for Div .
width:100%; Div self-adapting parent width height:100%; div adaptive height background-size:contain; Cannot use cover, background-repeat:no-repeat; Background-position:center; Center picture
The final effect: The image can be adapted to display the entire content at any resolution.
Bootstrap carousel component, large screen image centering effect