<img> 以保持比例扩展到整个 div答案

【问题标题】：<img> expand to entire div with keeping ratio<img> 以保持比例扩展到整个 div
【发布时间】：2016-07-10 09:30:14
【问题描述】：

我在引导程序中有一个画廊滑块。它必须是RWD，所以我必须使用例如。最大高度。

问题在于此图库中的图像可能不同。它们可以更大/更小 - 具有不同的比例。

在此示例中，.carousel div 具有 height: 450px。为了对 RWD 友好，我想使用 max-height，但是这个轮播中的图像必须是 100% 到整个 div 并保持比例。即使某些图像会溢出这个 div（或相反）。在这种情况下，img 必须垂直和水平居中（也许使用 flexbox？）。当我做max-height 时，旋转木马会跳跃，因为照片可以更大或更小。当我将height 设置为轮播时，她没有跳跃，但这不是 RWD 选项，并且某些图像可能小于 div（请查看下面的示例）

Here is example

【问题讨论】：

响应式设计通常关注媒体宽度，而媒体宽度又决定了高度。前任。 img { max-width: 100%; height: auto; }
您使用的是较高而不是较短图像的高度，您想要的是 max-height: 380px;

标签： html css twitter-bootstrap

【解决方案1】：

尝试使用object-fit: cover。无论您设置什么尺寸，这些都将保持您的图像配给。它有点像裁剪图像。您也可以添加object-position: center 以将您的图像定位在中心。

.carousel-inner > .item > img {
    object-fit: cover;
    object-position: center;
    // then your height and/or width
}

有关更多信息，请参阅以下链接：https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit

【讨论】：

【解决方案2】：

您最好的选择是将图像作为背景图像添加到您的 CSS 中，您可以在实际的 CSS 样式表中执行此操作，也可以将样式标记添加到 .item 本身。然后将您的高度等添加到.carousel .item 而不是整个轮播本身以及背景位置和背景大小，然后从标记中的.item 中完全删除图像标签。在下面的示例中，我将 !Importantant 添加到背景大小和背景位置。如果您只想在 css 样式表中声明背景，您可以删除这些，但如果您愿意，您可以做一些事情，例如将它们放在 html 标记中的样式标记中，如

<div class="item active" style="background:url('path-to-image');"></div>

如果您这样做，您需要将重要的语句保留在您的 css 中以使其正常工作，否则就不需要它们。

这是修改后的小提琴Fiddle Demo

所以你的 css 看起来像下面这样：

.carousel .item{
    width: 100%;
    height: 450px;
    overflow: hidden;
    background-position:center !Important;
    background-size:cover !important;
}
.carousel .item:nth-of-type(1){
  background:url('https://pixabay.com/static/uploads/photo/2014/03/29/09/17/cat-300572_960_720.jpg')
}
.carousel .item:nth-of-type(2){
  background:url('https://wallpapers.wallhaven.cc/wallpapers/full/wallhaven-349976.png')
}
.carousel .item:nth-of-type(3){
  background:url('https://wallpapers.wallhaven.cc/wallpapers/full/wallhaven-80082.jpg')
}

/* Indicators list style */
.article-slide .carousel-indicators {
    width: auto;
    white-space: nowrap;
    margin: 0;
    left: 50%;
    transform: translate(-50%, -50%);
}
/* Indicators list style */
.article-slide .carousel-indicators li {
    border: medium none;
    border-radius: 0;
    float: left;
    height: 54px;
    margin-bottom: 5px;
    margin-left: 0;
    margin-right: 5px !important;
    margin-top: 0;
    width: 100px;
}
/* Indicators images style */
.article-slide .carousel-indicators img {
    border: 2px solid #FFFFFF;
    float: left;
    height: 54px;
    left: 0;
    width: 100px;
}
/* Indicators active image style */
.article-slide .carousel-indicators .active img {
    border: 2px solid #428BCA;
    opacity: 0.7;
}

【讨论】：