twitter-bootstrap Bootstrap 3 中的响应式全宽轮播，具有最小高度和自动裁剪
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19862703/
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
Responsive full width carousel in Bootstrap 3 with min height and auto crop
提问by user2969467
To create a full width carousel in Bootstrap 3, I placed it directly in a row, without wrapping container. The carousel stretches perfectly to full screen width and scales to phone format. But here is the problem: because the carousel has a 100% width, the carousel scales too much on phone (320 px width): it is technically correct, but it would be nice if the height was higher.
为了在 Bootstrap 3 中创建全宽轮播，我将它直接排成一排，没有包装容器。旋转木马完美地延伸到全屏宽度并缩放到手机格式。但问题是：因为轮播有 100% 的宽度，轮播在手机上缩放太多（320 像素宽度）：技术上是正确的，但如果高度更高会更好。
Question: how to set a minimum height, maintain aspect ratio of the image and crop left and right on that minimum width?
问题：如何设置最小高度，保持图像的纵横比并在该最小宽度上左右裁剪？
回答by ntrrobng
I set the carousel-inner to be wider than the screen with a negative margin. This makes the carousel overflow and appear taller and more narrow, effectively cropping the left and right. On larger screens, I set it back to normal for the full image to appear. Finally, be careful that you have overflow: hidden; on the correct parent element so that mobile users don't experience unintended side-scroll.
我将 carousel-inner 设置为比屏幕宽并带有负边距。这使得旋转木马溢出并显得更高更窄，有效地裁剪了左右。在较大的屏幕上，我将其设置为正常以显示完整图像。最后，小心你有溢出：隐藏；在正确的父元素上，以便移动用户不会遇到意外的横向滚动。
.carousel-inner{
width: 120%;
margin-left: -10%;
}
@media (min-width: 768px){
.carousel-inner{
width: 100%;
margin: 0;
}
}
回答by Aleksandar Alex Perisic
Your img width is 100%, when it scale width it scale height, you can fix this with .carousel-inner > .item > a > img {max-width:200%} and media queries
你的 img 宽度是 100%，当它缩放宽度时它会缩放高度，你可以用 .carousel-inner > .item > a > img {max-width:200%} 和媒体查询来解决这个问题
or even this: Twitter Bootstrap: Have carousel images full width and height
