Bootstrap carousel component, large screen image centering effect

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