Html 在轮播中保持图像纵横比
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17290701/
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
Maintain image aspect ratio in carousel
提问by Vilarix
I am using Bootstrap to create a carousel, I have large images so when the screen is smaller than the image, the ratio is not kept.
我正在使用 Bootstrap 创建轮播，我有大图像，所以当屏幕小于图像时，不会保持比例。
How could I change that?
我怎么能改变呢？
Here is my code:
这是我的代码：
.carousel .item {
height: 500px;
}
.carousel img {
position: absolute;
top: 0;
left: 0;
min-width: 100%;
height: 500px;
}
I need the image to fit 100% width but keep its height of 500px (I think it's 500px) this should mean that on smaller screen we don't see the far left and far right of the image.
我需要图像适合 100% 宽度但保持其高度为 500 像素（我认为它是 500 像素）这应该意味着在较小的屏幕上我们看不到图像的最左侧和最右侧。
I tried containing the image in a div and add
我尝试在 div 中包含图像并添加
overflow: hidden;
width: 100%;
height: 500px;
display: block;
margin: 0 auto;
But it doesn't work
但它不起作用
Thank you!
谢谢！
采纳答案by scumah
The issue lays here, on bootstrap CSS:
问题出在 bootstrap CSS 上：
img {
max-width: 100%;
width: auto 9;
height: auto;
vertical-align: middle;
border: 0;
-ms-interpolation-mode: bicubic;
}
Having set max-width: 100%;the image won't be any larger than the viewport. You need to override that behavior on your CSS:
设置max-width: 100%;图像不会比视口大。您需要在 CSS 上覆盖该行为：
.carousel img {
position: absolute;
top: 0;
left: 0;
min-width: 100%;
height: 500px;
max-width: none;
}
Note the max-width: none;added at the bottom. This is the default max-width value and unsets the limit.
注意max-width: none;底部的添加。这是默认的最大宽度值并取消设置限制。
Here'syour fiddle updated.
这是你的小提琴更新。
回答by Dev
I think it is better to handle it with CSS3 object-fitattribute.
我认为最好用 CSS3object-fit属性处理它。
If you have image with fixed width and height and still if you want to preserve the aspect ratio, you can use object-fit:contain;. It will maintain the ratio with given height and width.
如果您有固定宽度和高度的图像，并且仍然希望保留纵横比，则可以使用object-fit:contain;. 它将保持给定高度和宽度的比例。
For example :
例如 ：
img {
height: 100px;
width: 100px;
object-fit: contain;
}
You can find more details here : http://www.creativebloq.com/css3/control-image-aspect-ratios-css3-2122968
您可以在此处找到更多详细信息：http: //www.creativebloq.com/css3/control-image-aspect-ratios-css3-2122968
Hope this will be useful to someone.
希望这对某人有用。
回答by claudio
Delete the imgtag inside the carousel item and add a background. In this way you can use the CSS3 cover property.
删除img轮播项目内的标签并添加背景。通过这种方式，您可以使用 CSS3 封面属性。
.item1 {
background: url('bootstrap/img/bg.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
回答by grooble
I was able to achieve this by commenting out the height line from the carousel.css line as shown below:
我能够通过注释掉 carousel.css 行中的高度线来实现这一点，如下所示：
.carousel-inner > .item > img {
position: absolute;
top: 0;
left: 0;
min-width: 100%;
/*height: 500px;*/
}
回答by Ryan Fishel
This code finally worked for me:
这段代码终于对我有用：
.carousel .item {
background:#F9F9F9;
border:1px solid #E0E0E0;
overflow:hidden;
margin-bottom:1em;
margin-top:1em;
padding:5px;
}
.carousel-inner > .item > img {
border: 1px solid #DDDDDD;
float: left;
margin: 0pt 3px;
padding: 2px;
height: none;
width: 100%;
}
.carousel-inner > .item > img:hover {
border: 1px solid #000000;
}
回答by Phil Lucks
to maintain aspect ratio & full coverage of carousel div:
保持旋转木马div的纵横比和完全覆盖：
img {
object-fit: cover;
overflow: hidden;
}
回答by shuckc
As others have mentioned, css3 works nicely for this. I used full width, fixed height for the container, then scaled the image keeping aspect ratio with 'cover', then throw away the overflow:
正如其他人所提到的，css3 可以很好地解决这个问题。我为容器使用了全宽、固定高度，然后使用“封面”缩放图像保持纵横比，然后丢弃溢出：
.carousel .carousel-inner img {
width: 100%;
height: 30em;
object-fit: cover;
overflow: hidden;
}
回答by Nicholas Ang
Apparently, the above mentioned solutions did not work for me (I don't know why?) but I found another workaround using javascript.
显然，上述解决方案对我不起作用（我不知道为什么？）但我找到了另一种使用 javascript 的解决方法。
Basically, this is a more tedious method but also works. You use jQuery to set the carousel height to the width divided by a certain aspect ratio.
基本上，这是一种更乏味的方法，但也有效。您使用 jQuery 将轮播高度设置为宽度除以一定的纵横比。
Here is my code:
这是我的代码：
var aspectRatio = 2.5; //Width to Height!!!
var imageWidth;
var imageHeight;
//bind the window resize event to the method -
//change in carousel width is only triggered when size of viewport changes
$(window).on("resize", methodToFixLayout);
//updates the carousel width when the window is resized
function methodToFixLayout(e){
imageWidth = carousel.width();
console.log("");
console.log("Method width" + imageWidth);
console.log("");
imageHeight = imageWidth / aspectRatio;
carouselContainer.height(imageHeight);
carousel.height(imageHeight);
carouselPic.height(imageHeight);
//solve the carousel glitch for small viewports - delete the carousel
windowWidth = $(window).width();
if (windowWidth < 840){
carousel.hide();
$("#side-navbar").hide();
} else {
carousel.show();
$("#side-navbar").show();
}
}
It seems to work for me fine.
它似乎对我有用。
Hope it works for you too.
希望它也适用于你。
You can either set the aspect ratio yourself, or use another method. First, set the window width and height to a view dimension where the picture appears well formatted. Query the width and height, and work out the ratio. Return the window back to the original width and height. The user would not notice the change at all but the dimensions would be recorded.
您可以自己设置纵横比，也可以使用其他方法。首先，将窗口宽度和高度设置为图片显示格式良好的视图尺寸。查询宽高，算出比例。将窗口恢复到原来的宽度和高度。用户根本不会注意到变化，但会记录尺寸。
