css 为什么我的覆盖层一直超过我的图像？

zdwk9cvp 于 11个月前发布在其他

关注(0)|答案(1)|浏览(98)

我的当前图像的覆盖超过了图像的当前大小。我最初改变了图像的大小，因为它是超级大的相比，我需要它，现在覆盖是不能正常工作
超文本标记语言：

<div class="col-md-5 order-md-2 text-center">
    <h2 class="title-dark">1957-1979</h2>
    <div class="image-container">
        <img src="../images/stanford_car.png" alt="Stanford Car" class="image-style">
        <div class="overlay">
            <div class="overlay-text">Stanford Car</div>
        </div>
    </div>
</div>

字符串
CSS：

.image-container {
    overflow: hidden;
    position: relative;
}

.image-style {
    width: 70%;
    height: auto;
    border-radius: 15px;
}

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    display: flex;
    opacity: 0;
    transition: .5s ease-in-out;
    background-color: rgba(0, 0, 0, 0.7);
    box-sizing: border-box;
    border-radius: 15px;
}

.image-container:hover .overlay {
    opacity: 1;
}

.overlay-text {
    color: white;
    font-size: 20px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

型

css

来源：https://stackoverflow.com/questions/77760682/why-does-my-overlay-keep-exceeding-past-my-image

1条答案

按热度按时间

5sxhfpxr1#

这里有两个选项：

选项1：同时调整叠加宽度

最简单的解决方案是简单地给予.overlay类与.image-style相同的宽度（即width: 70%;）。

.image-style {
    width: 70%;
    height: auto;
    border-radius: 15px;
}

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 70%;
    /* ... */
}

字符串

选项二：给予<img>一个设定宽度

第二个选项是不以百分比的形式指定图像的宽度。您可以给予像width: 1000px;或任何您想要的东西。然后，问题将是容器仍然处于最大宽度，因此覆盖仍然太大，对吗？但现在您可以通过将fit-content宽度设置为.image-container来解决这个问题。

.image-container {
    overflow: hidden;
    position: relative;
    width: fit-content;
}

.image-style {
    width: 1000px;
    height: auto;
    border-radius: 15px;
}

型

赞(0）回复(0）举报 11个月前

我来回答

css 为什么我的覆盖层一直超过我的图像？

1条答案

相关问题

热门标签

最新问答