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

Posted 2023-03-06

【中文标题】有没有办法只用 CSS 覆盖自动缩放图像？

【英文标题】：Is there a way to give a cover to auto-scale image with CSS only?

【发布时间】：2016-03-30 16:07:43

【问题描述】：

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

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

有没有办法制作一个半透明的封面（通过将opacity: 0.8设置为一个div），它只适合图像的大小，而不需要通过javascript获取宽度和高度？

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

【问题讨论】：

容器的大小也会可变吗？

没有。容器的大小是固定的。

您是否只需要 CSS 解决方案

嗯，你也可以在 html 中添加东西，但请不要使用 javascript。

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

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

【参考方案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 中的维度

【参考方案3】：

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

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

【讨论】：

好主意，但是为了我的实际使用，我还需要在封面上添加一个编辑按钮，所以不适合我的情况。

我假设您希望您的按钮位于同一个位置（相对于容器），无论图像大小如何。在这种情况下，您可以将您的原始解决方案与我的解决方案结合起来。

【参考方案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>

【参考方案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?

【讨论】：

嗯...我真的不能把它当作一个纯 CSS 的解决方案。

那么你将如何构建你的 html 来显示上传的图像。

好吧，现在我删除了动态元素添加，正如你在 cmets 中提到的那样，我可以将内容添加到我的 html 但没有 javascript。

【参考方案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 选择器即可获得覆盖。

【讨论】：

这不是一个有效的解决方案。您应该在回答之前进行测试，尤其是我已经给出了 jsfiddle 上的基本代码。 jsfiddle.net/f3w8hura

那我想你没有仔细阅读这个问题。我想要的是容器内自动缩放图像的封面。您的 sn-p 甚至不包含图像。

我的回答试图解释的是伪元素将占据父元素的尺寸（在本例中为 div 标签；如果您需要，则为 img 标签）。我在这里明确发送了 div 的尺寸作为示例，但是 img 标签会继承它自己的尺寸。

看来你还是不明白我在问什么。看看humblebee的回答。他正在做正确的事，尽管他无法仅使用 CSS 来做到这一点。

再编辑一次。如果这不是你想要的，我永远不会明白。