有没有办法只用 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 伪元素，请参阅下面的替代小提琴。
3. 使用 flexbox 使内部容器在外部容器中居中。这也可以使用 position absolute + translate3d 技巧来完成，该技巧用于在原始问题中定位 .cover 元素，请参见下面的替代小提琴。

以下是上述第 2 点和第 3 点的替代解决方案： https://jsfiddle.net/muorou0c/18/

Answer 2

我已经修改了你的小提琴，并在容器下添加了一个额外的层

.container {
  position: relative;
  display: block;
  height: 300px;
  width: 300px;
  max-height: 300px;
  max-width: 300px;
  background-color: #000;
  border: 2px solid red;
}

.container2 {
  max-width: inherit;
  max-height: inherit;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  border: 2px solid cyan;
}

.container2 img {
  max-height: inherit;
  max-width: inherit;
}

.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="container2">
  <img src="http://lorempixel.com/400/200/">
      <div class="cover"></div>
  </div>
</div>

<div class="container">
  <div class="container2">
  <img src="http://lorempixel.com/400/800/">
  <div class="cover"></div>
  </div>
</div>

这可以通过设置容器的最大高度和最大宽度来实现。这通过继承值转到图像。

然后图像得到它的尺寸。

并且 container2 元素从子元素中获取它的维度。

最后，cover 使用了 container2 中的维度

Answer 3

如果它符合您的需求，您可以在图像上添加a lot of filters（而不是用彩色 div 覆盖它）。 Here's a example.

img:hover{
  -webkit-filter:  brightness(200%); 
  filter:  brightness(200%);
}

Answer 4

.container {
  position: relative;
  display: block;
  height: 300px;
  width: 300px;
  background-color: #000;
  border: 2px solid red;
}
.container img {
    position: absolute;
    display: block;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    object-fit: cover;
    object-position: center;
    height: 100%;
    width: 100%;
}
.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">
  <img src="http://lorempixel.com/400/200/">
  <div class="cover"></div>
  </div>
</div>

<div class="container">
  <img src="http://lorempixel.com/400/800/">
  <div class="cover"></div>
</div>

Answer 5

好的，我对您的代码的组织方式进行了一些修改。

.container {
  position: relative;
  display: block;
  height: 300px;
  width: 300px;
  background-color: #000;
  border: 2px solid red;
}
.image {
  display: block;
  content: "";
  width:auto;
  position: relative;
  max-width: 100%;
  max-height: 100%;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  background-image: url("http://lorempixel.com/400/200/");
}
.image:hover:after{
  display:block;
  content: "";
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: #fff;
  opacity: .5; /* if needed */
}

<div class="container">
  <div class="image">
     <img src="http://lorempixel.com/400/200/" style="visibility:hidden"/>
  </div>
</div>

在您构建 html 的时候添加 img 元素以使用 javascript 保持容器的高度。我认为在上传图片的情况下，必须动态构建 html。

参考资料

Overlay image on dynamically sized div

How to get div height to auto-adjust to background size?

Why don't :before and :after pseudo elements work with `img` elements?

Answer 6

听起来像是伪元素的工作。

.container{
     background:yellow;
     border:2px solid red;
     width:300px;
     height:300px;
     text-align:center;
}

.container:before{ 
    content: "";
    display: inline-block;
    vertical-align: middle;
    height: 100%;
  }

.cover{
        position:relative;
        display:inline-block;
        vertical-align:middle;
    }
    
 .cover:hover:after{
        content:"";
        position:absolute;
        top:0;
        left:0;
        right:0;
        bottom:0;
        max-width:inherit;
        max-height:inherit;
        opacity:.5;
        background:blue;
    }

.container img{
    display:block;
    max-width:300px;
    max-height:300px;
}

<div class="container"><div class="cover"><img src="http://lorempixel.com/400/200/"/></div></div>

只需将background 属性分配给.cover:after 选择器即可获得覆盖。