Question

我在bootstrap中有一个库滑块。它必须是RWD所以我必须使用例如。最大高度。

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

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

Here is example

Answer 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

Answer 2

您最好的选择是将您的图像作为背景图像添加到您的CSS中，您可以在实际的css样式表中执行此操作，或者只是将样式标记添加到.item本身。然后将您的身高等等添加到.carousel .item而不是整个轮播本身以及背景位置和背景大小，然后从标记中的.item中完全删除图片代码。在下面的示例中，我将！Imporatant添加到背景大小和背景位置。你可以删除这些，如果你只是在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;
}

<img/>以保持比例

2 个答案: