Почему заливка картинки больше самой заливки?

Question

[flexpc]

я говорю про черный прямоугольник под фото.

return (
    <div className="App">
      <NavBar/>
      <div class='img'>
        <img src={main} alt='main'/>
      </div>
    </div>
  );

.img {
    background-color: #000;
}

.img img {
    opacity: 0.6;
    width: 100%;
}

Всё это нужно для затемнения фотографии и впрочем то оно работает, только затемнение чуть больше самой фотографии, как решить? Вот ссылка на сайт, смотреть с компа надо, адаптивы нет

Comments

[Ankhena]

Ещё можно задать vertical-align в явном виде, например, top

[Сергей delphinpro]

Ankhena, правильнее сказать, любой, отличный от baseline. Если в явном виде задать vertical-align:baseline, то ничего не изменится :)

[Ankhena]

Сергей delphinpro, ага, я упростила. Не права, надо было, конечно, полностью написать.

Answer 1

[Ivan Bogachev]

как решить?

.img img {
    display: block;
}

Всё это нужно для затемнения фотографии

Можно рассмотреть еще вариант без отдельного элемента с фоном:

img {
    filter: brightness(0.6);
}