Question

本质上，我想做的是创建“覆盖”效果，而不直接在CSS中使用background-url。

我希望图像在移动状态下溢出并保持居中，同时容器高度保持固定为600px。在仍然使用img标签的情况下是否有可能？

以下是pen，代码如下：

<header id="carouselHome" class="carousel slide carousel-fade" data-ride="carousel">

    <!-- Wrapper for slides -->
    <div class="carousel-inner" role="listbox">
        <div class="item active"><img src="https://placehold.it/1500x600" /></div>
        <div class="item"><img src="https://placehold.it/1500x600" /></div>
    </div>

    <!-- Controls -->
    <a class="left carousel-control" href="#carouselHome" role="button" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#carouselHome" role="button" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
    </a>
</header>

对应的CSS：

.carousel {}
.carousel-inner {}
.carousel-inner .item {
    height: 600px;
}
.carousel-inner .item img {
    width: 100%;
    height: auto;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}
.carousel-fade .carousel-inner .item {
  opacity: 0;
  transition-property: opacity;
}

.carousel-fade .carousel-inner .active {
  opacity: 1;
}

.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right {
  left: 0;
  opacity: 0;
  z-index: 1;
}

.carousel-fade .carousel-inner .next.left,
.carousel-fade .carousel-inner .prev.right {
  opacity: 1;
}

.carousel-fade .carousel-control {
  z-index: 2;
}

Answer 1

在这种情况下，css object-fit: cover;之类的声音可能会起作用。 https://css-tricks.com/almanac/properties/o/object-fit/

请注意，较旧版本的IE不支持此属性。此polyfill可能适用于IE 9及更高版本。https://github.com/constancecchen/object-fit-polyfill

.carousel-inner .item img {
    object-fit: cover;
    width: 100%;
    height: 100%;
}

垂直居中放置图像并保持相同高度

1 个答案: