html - 有没有办法只用 CSS 来覆盖自动缩放图像？

Question

众所周知，使用 max-height 和 max-width 可以使图像自动适应 div，如下所示:

.cover img {
    max-width: 100%;
    max-height: 100%;
}

有没有办法制作一个半透明的封面(通过设置 opacity: 0.8 到一个 div)，而不需要通过 javascript 获取宽度和高度来适应图像的大小？

以下是我在jsfiddle中的尝试。我只能让它覆盖整个容器，但我想要的只是覆盖图像。图像的大小是可变的，因为它们将由用户上传。 https://jsfiddle.net/muorou0c/1/

Answer 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>

这个解决方案由三个部分组成:

1. img 标签上的硬编码容器大小(最大宽度:300 像素，最大高度:300 像素)，以保持宽高比和大小。
2. 使用内部容器 div 包裹覆盖层的边界，设置覆盖层的边界。 .cover 可以替换为::before 或::after 伪元素，请参阅下面的替代 fiddle 。
3. 使用 flexbox 使内部容器在外部容器中居中。这也可以使用 position absolute + translate3d 技巧来完成，该技巧用于在原始问题中定位 .cover 元素，请参阅下面的替代 fiddle 。

这是上面第 2 点和第 3 点的替代解决方案的 fiddle : https://jsfiddle.net/muorou0c/18/