Есть div. У него есть максимальная длина и высота. В этом блоке изображение.
<div class="div-img col-md-12 p-0 m-0 center-img">
<img class="img-article"
src="http://geniusinfoways.com/common/front/images/bk/img-7.jpg">
</div>
класс
.div-img {
height: 350px;
background-color: aquamarine;
}
Класс картинки
.img-article{
max-height: 350px;
max-width:max-content
}
Нужно что б это изображение автоматически растянулось на весь блок не меняя своего разрешения, что б не осталось левых полей как на картинке.
Но изображение например большое и если я дам ему оригинальный размер в рамках это блока, то будет виден лишь кусочек картинки во всем блоке. Какие классы применить что б растяжение остановилось на определенном размере и не оставило левых полей? Я понимаю что тогда потеряется какой-то кусочек изображения но это лучше чем растягивать. Нужно как с обложной на фейсбуке.
object-fit: cover;