Shulou(Shulou.com)06/01 Report--

This article mainly introduces the "bootstrap how to make the picture adaptive and center display" related knowledge, editor through the actual case to show you the operation process, the method of operation is simple and fast, practical, hope that this "bootstrap how to make the picture adaptive and center display" article can help you solve the problem.

1. What we often use to solve this problem is to use the method of location: the code is as follows

Title * {margin: 0 auto;} .bannerbox {position: relative; overflow: hidden; height: 410px } .banner {width: 2000px; / * Image width * / position: absolute; left: 50%; margin-left:-1000px / * half the width of the picture * /}

We simply wrap the photo in a box, left: 50%; use this property to center our image.

two。 We can also use the background property to set the display of the picture in the center. Take the rowing chart as an example, and the code is as follows:

!-- the picture rotation item of Wrapper for slides rotation-- >

First of all, we set up the box and put in the photo. Next, set a background image and give the height of the div box. The code is as follows:

# main_ad > .carousel-inner > .item {height: 410pxalternate background position: center center;background-size: cover;}

In this way, we have completed the adaptive use, but for different screen sizes, our team code has been modified as follows:

In the css section, we use the media query method; the code is as follows:

/ * broadcast item * / # main_ad {} # main_ad > .carousel-inner > .item {background-repeat:no-repeat; background-position: center center; background-size: cover;} @ media (min-width: 768px) {# main_ad > .carousel-inner > .item {height: 410px;}} # main_ad > .carousel-inner > .item > img {width:100%;}

Through this media query, the problem of changing the size of our pictures can be well controlled. Our js code (using jQuery) is as follows:

$(function () {function resize () {/ / get the screen width var windowWidth = $(window) .width (); / / determine the screen size var isSmallScreen = windowWidth

.carousel-inner > .item') .each (function (iJing item) {/ / because you are getting a dom object, convert the DOM object to a jquery object var $item = $(item) / / to get different pictures according to the size of the screen, the data () function is var imgSrc = isSmallScreen? $item.data ('image-xs'): $item.data (' image-lg') that specifically gets the data attribute; / / after obtaining the data attribute, set the background image $item.css ('backgroundImage',' url ("'+ imgSrc +')') to the div / / for the mobile end, the size needs to be changed proportionally, so the small screen uses img mode and adds the img tag if (isSmallScreen) {$item.html (') to the div.

')} else {/ / clear the img tag $item.empty () in div when the screen changes from small to large;});} $_ (window) .on (' resize', resize) .trigger ('resize');}) This is the end of the introduction to "how bootstrap makes the picture adaptive and centered". Thank you for reading. If you want to know more about the industry, you can follow the industry information channel. The editor will update different knowledge points for you every day.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.