twitter-bootstrap 中心旋转木马图像不受屏幕大小的影响
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19453588/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
twitter-bootstrap center carousel image reguardless of screen size
提问by bwawok
I have the following desires for a twitter bootstrap carousel:
我对 twitter bootstrap carousel 有以下愿望：
- When screen is bigger then carousel, I want the image centered.
- When the screen is smaller than the carousel, I want to see just PART of the image. This part of the image should be centered.
- At no point should the images be resized or scaled
- The transitions should work.
- 当屏幕比轮播大时，我希望图像居中。
- 当屏幕小于轮播时，我只想看到图像的一部分。图像的这部分应该居中。
- 任何时候都不应调整图像大小或缩放
- 过渡应该有效。
My example below fixed problems 1-3.. but it breaks 4. I can easily fix 4 if I am willing to break 3, but that is no good.
我下面的示例修复了问题 1-3.. 但它打破了 4。如果我愿意打破 3，我可以轻松修复 4，但这并不好。
Bootply link to example: http://bootply.com/88542
Bootply 链接到示例：http://bootply.com/88542
HTML:
HTML：
<!-- Carousel
================================================== -->
<div id="myCarousel" class="carousel slide">
<!-- Indicators -->
<ol class="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>
</ol>
<div class="carousel-inner">
<div class="item active">
<img src="http://lorempixel.com/1200/600/abstract/1" height="600px" width="1200px">
<div class="container">
<div class="carousel-caption">
<h1>Bootstrap 3 Carousel Layout</h1>
<pthis is="" an="" example="" layout="" with="" carousel="" that="" uses="" the="" bootstrap="" 3="" styles.<="" small=""><p></p>
<p><a class="btn btn-lg btn-primary" href="http://getbootstrap.com">Learn More</a>
</p></pthis></div>
</div>
</div>
<div class="item">
<img src="http://lorempixel.com/1200/600/abstract/2" height="600px" width="1200px">
<div class="container">
<div class="carousel-caption">
<h1>Changes to the Grid</h1>
<p>Bootstrap 3 still features a 12-column grid, but many of the CSS class names have completely changed.</p>
<p><a class="btn btn-large btn-primary" href="#">Learn more</a></p>
</div>
</div>
</div>
<div class="item">
<img src="http://placehold.it/1200X600" height="600px" width="1200px">
<div class="container">
<div class="carousel-caption">
<h1>Percentage-based sizing</h1>
<p>With "mobile-first" there is now only one percentage-based grid.</p>
<p><a class="btn btn-large btn-primary" href="#">Browse gallery</a></p>
</div>
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="icon-prev"></span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="icon-next"></span>
</a>
</div>
<!-- /.carousel -->
CSS
CSS
/* BOOTSTRAP 3.x GLOBAL STYLES
-------------------------------------------------- */
body {
padding-bottom: 40px;
color: #5a5a5a;
}
/* CUSTOMIZE THE CAROUSEL
-------------------------------------------------- */
/* Carousel base class */
.carousel {
margin-bottom: 60px;
}
/* Since positioning the image, we need to help out the caption */
.carousel-caption {
z-index: 10;
}
/* Declare heights because of positioning of img element */
.carousel .item {
height: 600px;
width: 1200px;
background-color:#bbb;
left: 50%;
margin-left: -600px;
}
.carousel img {
position: absolute;
top: 0;
}
/* RESPONSIVE CSS
-------------------------------------------------- */
@media (min-width: 768px) {
/* Remve the edge padding needed for mobile */
.marketing {
padding-left: 0;
padding-right: 0;
}
/* Navbar positioning foo */
.navbar-wrapper {
margin-top: 20px;
margin-bottom: -90px; /* Negative margin to pull up carousel. 90px is roughly margins and height of navbar. */
}
/* The navbar becomes detached from the top, so we round the corners */
.navbar-wrapper .navbar {
border-radius: 4px;
}
/* Bump up size of carousel content */
.carousel-caption p {
margin-bottom: 20px;
font-size: 21px;
line-height: 1.4;
}
}
回答by CENT1PEDE
This might help if you want the image to be re-sized according to the screen size of the device. The width = "100%"will do the job.
如果您希望根据设备的屏幕尺寸重新调整图像大小，这可能会有所帮助。该width = "100%"将做的工作。
<img src="http://lorempixel.com/1200/600/abstract/2" width = "100%">
回答by Alex Z
just add this to your css:
只需将其添加到您的 css 中：
.carousel-inner > .item > img, .carousel-inner > .item > a > img {
width: 100%;
}
回答by Adrian Cumpanasu
add this
添加这个
.carousel .item img {
left: -9999px; /*important */
right: -9999px; /*important */
margin: 0 auto; /*important */
max-width: none; /*important */
min-width: 100%;
position: absolute;
}
And of course one of the parent divs needs to have a position:relative, but I believe it does by default.
当然，其中一个父 div 需要有一个 position:relative，但我相信默认情况下是这样。
See it here: http://paginacrestinului.ro/
在这里看到它：http: //paginacrestinului.ro/
