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

众所周知,使用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;
}