how do I keep the aspect ratio of responsive images inside a bootstrap carousel while the height of the carousel changes in response
本问题已经有最佳答案,请猛点这里访问。
我该如何创建一个转盘,它可以响应浏览器或设备的宽度,保持它所包含的图像的纵横比,并在缩小浏览器大小时保持对图像高度的响应…
当图像处于最大宽度时,我希望旋转木马位于页面中央。
如果这是迄今为止我的代码,我将在下面发布我的网址,以充分说明它的行为;
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 | /* GLOBAL STYLES -------------------------------------------------- */ /* Padding below the footer and lighter body text */ body { padding-bottom: 40px; color: #5a5a5a; } /* CUSTOMIZE THE CAROUSEL -------------------------------------------------- */ /* Carousel base class */ .carousel { height: 500px; margin-bottom: 10px; margin-left: 0px; margin-right: 0px; } /* Since positioning the image, we need to help out the caption */ .carousel-caption { z-index: 10; color: #FFD700; } /* Declare heights because of positioning of img element */ .carousel .item { height: 500px; background-color: #777; } .carousel-inner > .item > img { position: absolute; max-width: 100%; width: auto; height: auto; vertical-align: middle; } .carousel-indicators li { background-color: #999; } .carousel-indicators li:hover { background-color: #444; } .carousel-indicators .active { background-color: #666; } .carousel-control .icon-prev, .carousel-control .icon-next { font-size: 100px; color: blue; margin-top: -70px } /* RESPONSIVE CSS -------------------------------------------------- */ /* Bump up size of carousel content */ .carousel-caption p { margin-bottom: 20px; font-size: 25px; line-height: 1.4; } |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 | <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" rel="stylesheet"/> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> <!-- Carousel ================================================== --> <!-- Indicators --> <li data-target="#myCarousel" data-slide-to="0" class="active"> </li> <li data-target="#myCarousel" data-slide-to="1"> </li> <li data-target="#myCarousel" data-slide-to="2"> </li> <img class="first-slide" src="http://buzzingbikes.com/static/img/road_bike.jpg" alt="First slide"> A Boost Of Power <p> Checkout our new stock! Nothing feels better than the wind blasting past your streaming eyes, like our lightweight Road bike frames! </p> <p> Check 'em out! </p> <img class="second-slide" src="http://buzzingbikes.com/static/img/ehline3.jpg" alt="Second slide"> Take It To Another Level <p> With out streamlined beautifully slick and super fast range you'll get from A to B in no time at all! </p> <p> Learn more </p> <img class="third-slide" src="http://buzzingbikes.com/static/img/New-36V-350-Watt-Lithium-Battery-Electric-Snow-Bike-Electric-Bicycle-SHIMAN0-21-Speed-Mountain-Bike.jpg" alt="Third slide"> One more for good measure. <p> Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit. </p> <p> Browse gallery </p> <span class="icon-prev" aria-hidden="true"></span> <span class="sr-only">Previous</span> <span class="icon-next" aria-hidden="true"></span> <span class="sr-only">Next</span> <!-- /.carousel --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"> |
我真的需要帮助,我到处找,找不到简单的答案…
我的网站是http://buzzingbikes.com/
利用浏览器的大小来了解我的对手…
我需要使用javascript吗?如果需要,我需要做什么?
我很感激你能帮我把这件事办好…
谢谢大家
是的,
例如:
1 2 3 4 5 | >>> import sys >>> sys.getsizeof('short') 42 >>> sys.getsizeof('a very long and convoluted string') 70 |
如您所见,