twitter-bootstrap Twitter Bootstrap 轮播图像出现扭曲
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16948266/
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 carousel image appears distorted
提问by Derek
I'm building a web site based on a theme built with Twitter Bootstrap: http://demo.graphikaria.com/agilis/theme.
我正在构建一个基于使用 Twitter Bootstrap 构建的主题的网站：http: //demo.graphikaria.com/agilis/theme。
Whenever I decrease the width of my browser the background image for the home page carousel becomes distorted.
每当我减小浏览器的宽度时，主页轮播的背景图像就会扭曲。
For the default faded background image the template uses, this isn't a big deal, but if you want to use a clear image or logo instead it will appear distorted or squished.
对于模板使用的默认褪色背景图像，这没什么大不了的，但是如果您想使用清晰的图像或徽标，它会显得扭曲或压扁。
采纳答案by Zubzob
You have:
你有：
.carousel .item>img {
position: absolute;
top: 0;
left: 0;
min-width: 100%;
height: 500px;
}
Change the height to 100%.
将高度更改为100%。
回答by Tim Ogilvy
If you use an IMG tag, it will always end up no wider than its container DIV. Because bootstrap re-sizes fixed images for fluid layout, especially on mobile, the images are squished to the screen width.
如果您使用 IMG 标签，它的最终宽度将始终不超过其容器 DIV。因为 bootstrap 会重新调整固定图像的大小以实现流畅的布局，尤其是在移动设备上，图像会被压缩到屏幕宽度。
An alternative that seems to work well so far for me is to use a <div> tag with a background image.
到目前为止对我来说似乎效果很好的另一种方法是使用带有背景图像的 <div> 标签。
The class:
班上：
.carousel-inner > .item > .carousel-image {
width: 100%;
height: 500px;
text-align: center;
align: center;
}
The Item Code:
项目代码：
#csl-item1 {
background:url(img/carousel_image1.jpg);
background-repeat: no-repeat;
background-position: center top;
}
The Item:
项目：
<div class="item active">
<div id="csl-item1" class="carousel-image"> </div>
<div class="container">
<div class="carousel-caption">
<!-- Caption -->
</div>
</div>
</div>
I'd be curious to see if anyone has any bugs with this method tho, so let me know if you think its a bad idea...
我很想知道是否有人对这种方法有任何错误，所以如果您认为这是一个坏主意，请告诉我......
回答by Ira Herman
The cleanest solution I've found is adding this css to your image in the slide:
我发现的最干净的解决方案是将此 css 添加到幻灯片中的图像中：
object-fit: cover;
overflow: hidden;
You can even just add it inline to the img tag:
您甚至可以将其内联添加到 img 标签中：
<img style="object-fit: cover; overflow: hidden;" class="first-slide" src="/images/beach.jpg" alt="sunny day at the beach">
There's a great write-up that shows examples of CSS3 properties and their impact on image aspect ratios here: http://www.creativebloq.com/css3/control-image-aspect-ratios-css3-2122968
这里有一篇很棒的文章，展示了 CSS3 属性的示例及其对图像纵横比的影响：http: //www.creativebloq.com/css3/control-image-aspect-ratios-css3-2122968
回答by pickypg
Looking at it in Chrome, the default max-width: 100%seems to notbe what you want.
在 Chrome 中查看它，默认值max-width: 100%似乎不是您想要的。
In your CSS, you can add to the already defined rules to get the browser to use the default.
在您的 CSS 中，您可以添加到已定义的规则中，以使浏览器使用默认规则。
.carousel .item > img { max-width: none }
It's worth noting that you specify min-width: 100%combined with an absolute height, so on large screens (like mine, which is 1080p), it will still distort the image if it gets too wide, thus changing the aspect ratio and again distorting the image.
值得注意的是，您指定min-width: 100%与绝对值结合使用height，因此在大屏幕（如我的，1080p）上，如果图像太宽，它仍然会扭曲图像，从而改变纵横比并再次扭曲图像。
回答by Ryan Fishel
OK, the best I could do was this…
好吧，我能做的最好的就是这个……
/* Carousel base class */
.carousel {
height: auto;
margin-bottom: 60px;
}
/* Since positioning the image, we need to help out the caption */
.carousel-caption {
z-index: 35;
}
/* Declare heights because of positioning of img element */
.carousel .item {
background:#e64c6c;
border:.5px solid #e7c1af;
overflow:hidden;
padding:3px;
min-height: 500px;
}
.carousel-inner > .item > img {
float:right;
padding: 2px;
padding-left: 3px;
min-width: 500px;
}
.carousel-inner > .item > img:hover {
border: 1px solid #e7c1af;
}
回答by bfredo123
With bootstrap 3.3.7, I could fix this issue by simply removing the 'height' line in carousel.csshere:
使用 bootstrap 3.3.7，我可以通过简单地删除carousel.css这里的“高度”行来解决这个问题：
.carousel-inner > .item > img {
position: absolute;
top: 0;
left: 0;
min-width: 100%;
/*height: 500px;*/
}
回答by Jonesyd
In my case the image was distorted when the screen size increased. I was working off one of the start Bootstrap free templates (https://startbootstrap.com/) using Bootstrap 4.
就我而言，当屏幕尺寸增加时，图像会失真。我正在使用 Bootstrap 4 处理启动 Bootstrap 免费模板 ( https://startbootstrap.com/) 之一。
Based on the answer above from Ira Herman (and I would comment if I had enough credit points), I ended up with the code below to solve my problem:
根据上面来自 Ira Herman 的回答（如果我有足够的信用点我会发表评论），我最终得到了下面的代码来解决我的问题：
.carousel-item {
height: 32rem;
background-color: #777;
}
.carousel-item > img {
position: absolute;
top: 0;
right: 0;
min-width: 100%;
height: 32rem;
object-fit: cover;
overflow: hidden;
object-position: 20% 19%;
}The object-position x and y coordinates can be tweaked depending how you want the image to increase, decrease. Adjusting the image from the right also helped in my case. I hope that helps.
可以根据您希望图像增加、减少的方式调整对象位置 x 和 y 坐标。在我的情况下，从右侧调整图像也有帮助。我希望这有帮助。
