众所周知,使用 max-height 和 max-width 可以使图像自动适应 div,如下所示:
.cover img {
max-width: 100%;
max-height: 100%;
}
有没有办法制作一个半透明的封面(通过设置 opacity: 0.8
到一个 div),而不需要通过 javascript 获取宽度和高度来适应图像的大小?
以下是我在jsfiddle中的尝试。我只能让它覆盖整个容器,但我想要的只是覆盖图像。图像的大小是可变的,因为它们将由用户上传。 https://jsfiddle.net/muorou0c/1/
最佳答案
这是一个简单的 flexbox 解决方案,应该非常简单:
.container {
display: block;
height: 300px;
width: 300px;
background-color: #000;
border: 2px solid red;
display: flex;
align-items: center;
justify-content: center;
}
.inner {
position: relative;
}
.container img {
max-width: 300px;
max-height: 300px;
display: block;
}
.cover {
display: none;
}
.container:hover .cover{
display: block;
position: absolute;
top: 0px;
left: 0px;
height: 100%;
width: 100%;
background-color: #FFF;
opacity: 0.8;
}
<div class="container">
<div class="inner">
<img src="http://lorempixel.com/400/200/">
<div class="cover"></div>
</div>
</div>
<div class="container">
<div class="inner">
<img src="http://lorempixel.com/400/800/">
<div class="cover"></div>
</div>
</div>
这个解决方案由三个部分组成:
- img 标签上的硬编码容器大小(最大宽度:300 像素,最大高度:300 像素),以保持宽高比和大小。
- 使用内部容器 div 包裹覆盖层的边界,设置覆盖层的边界。 .cover 可以替换为::before 或::after 伪元素,请参阅下面的替代 fiddle 。
- 使用 flexbox 使内部容器在外部容器中居中。这也可以使用 position absolute + translate3d 技巧来完成,该技巧用于在原始问题中定位 .cover 元素,请参阅下面的替代 fiddle 。
这是上面第 2 点和第 3 点的替代解决方案的 fiddle : https://jsfiddle.net/muorou0c/18/
关于html - 有没有办法只用 CSS 来覆盖自动缩放图像?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34448952/