Есть ли способ прикрыть обложку для автомасштабирования изображения только с помощью 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/

Ответ 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>

Ответ 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>

Ответ 3

Если это соответствует вашим потребностям, множество фильтров вы можете добавить поверх вас изображение (а не покрывать его цветным div), Вот пример.

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>

Ответ 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>