Как отобразить изображения одинакового размера - с заполненным пространством?

Question

Я указал максимальную ширину для моих фотографий. Теперь у меня проблема в том, что картинки не одинаковы по высоте. Есть ли способ заполнить недостающую высоту белой областью (одинакового размера сверху и снизу), чтобы достичь максимальной высоты, но изображение не искажалось?

Мой код:

* Используется 1004 *

w3school.

Answer 1

img {
  height: 200px;
  object-fit: cover;
}

надеюсь, что это работает

Answer 2

хорошей практикой является предоставление для каждого родителя div, которые являются w3-col делениями background-image и общим class, который указывает другие необходимые background свойства и требуемую высоту, равную 200px. таким образом, изображения не будут растягиваться, так как div - это те, которые указаны с требуемым height.

. HTML Код будет:

 <div class="w3-row-padding">
        <div class="filterDiv master">
            <div class="w3-col l3 m6 w3-margin-bottom">
                <div class="w3-display-container img-container1 img-container ">
                    <div class="w3-display-topleft w3-black w3-padding ">Master
                    </div>
                </div>
            </div>
        </div>
        <div class="filterDiv master">
            <div class="w3-col l3 m6 w3-margin-bottom img-container2 img-container ">
                <div class="w3-display-container">
                    <div class="w3-display-topleft w3-black w3-padding ">Master</div>
                </div>
            </div>
        </div>
        <div class="filterDiv master">
            <div class="w3-col l3 m6 w3-margin-bottom">
                <div class="w3-display-container  img-container3 img-container ">
                    <div class="w3-display-topleft w3-black w3-padding">Master</div>
                </div>
            </div>
        </div>
        <div class="filterDiv master">
            <div class="w3-col l3 m6 w3-margin-bottom">
                <div class="w3-display-container img-container4 img-container ">
                    <div class="w3-display-topleft w3-black w3-padding ">Master</div>
                </div>
            </div>
        </div>
    </div>

, учитывая следующее CSS

.img-container {
    height: 200px;
    background-position: center;
    background-size: cover;
}

.img-container1 {
    background-image: url("Img/5.jpg");

}

.img-container2 {
    background-image: url("Img/6.jpg");

}

.img-container3 {
    background-image: url("Img/7.jpg");


}

.img-container4 {
    background-image: url("Img/8.jpg");


}