在轮播中保持图像宽高比
我使用Bootstrap来创build一个旋转木马，我有大的图像，所以当屏幕比图像小，比例不保留。
我怎么能改变这个？
这是我的代码：
.carousel .item { height: 500px; } .carousel img { position: absolute; top: 0; left: 0; min-width: 100%; height: 500px; } http://jsfiddle.net/DRQkQ/
我需要图像适合100％的宽度，但保持500px的高度（我认为它是500px），这应该意味着在较小的屏幕上，我们没有看到图像的最左边和最右边。
我试图在一个div中包含图像，并添加
overflow: hidden; width: 100%; height: 500px; display: block; margin: 0 auto;
但它不起作用
谢谢！
这个问题在这里，引导CSS：
img { max-width: 100%; width: auto 9; height: auto; vertical-align: middle; border: 0; -ms-interpolation-mode: bicubic; }
设置了max-width: 100%; 图像将不会比视口大。 你需要重写你的CSS的行为：
.carousel img { position: absolute; top: 0; left: 0; min-width: 100%; height: 500px; max-width: none; }
请注意max-width: none; 添加在底部。 这是默认的最大宽度值，并取消限制。
这是你的小提琴更新。
我认为最好用CSS3的object-fit属性来处理它。
如果您的图像具有固定的宽度和高度，并且仍想保持宽高比，则可以使用object-fit:contain; 。 它将保持与给定的高度和宽度的比例。
例如 ：
img { height: 100px; width: 100px; object-fit: contain; }
你可以在这里find更多的细节： http : //www.creativebloq.com/css3/control-image-aspect-ratios-css3-2122968
希望这对别人有用。
删除传送带项目内的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; }
我能够通过从carousel.css行注释掉高度线来实现这一点，如下所示：
.carousel-inner > .item > img { position: absolute; top: 0; left: 0; min-width: 100%; /*height: 500px;*/ }
这个代码终于为我工作：
.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; }
保持旋转木马div的纵横比和全覆盖：
img { object-fit: cover; overflow: hidden; }
显然，上述解决scheme并没有为我工作（我不知道为什么？），但我发现另一个解决方法使用JavaScript。
基本上，这是一个更乏味的方法，但也有效。 您可以使用jQuery将传送带高度设置为宽度除以某个纵横比。
这是我的代码：
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(); } }
这似乎对我很好。
希望它也适用于你。
您可以自己设置宽高比，也可以使用其他方法。 首先，将窗口宽度和高度设置为图片格式良好的视图尺寸。 查询宽度和高度，并计算出比率。 将窗口返回到原始宽度和高度。 用户根本不会注意到这个变化，但是尺寸会被logging下来。
正如其他人所说，css3很好地为此工作。 我用容器的全宽，固定高度，然后用“盖子”缩放图像保持宽高比，然后丢弃溢出：
.carousel .carousel-inner img { width: 100%; height: 30em; object-fit: cover; overflow: hidden; }
