Соотношение сторон изображения.
Свойство object-fit

Исходные изображения

object-fit: fill

object-fit: contain

object-fit: cover

object-fit: none

object-fit: scale-down

Исходный код этого примера:

<style>
    .wrap {
        text-align: center;
    }
    .wrap img {
        width: 220px;
        height: 220px;
        background-color: #ccd;
    }
</style>
<h2 class="c">Исходные изображения</h2>
<p style="padding-top: 0; text-align: center;">
    <img src="London1.jpg" alt="Свойство object-fit" style="vertical-align: middle">
    <img src="London2.jpg" alt="Свойство object-fit" style="vertical-align: middle">
</p>
<div class="wrap">
    <h2>object-fit: fill</h2>
    <img src="London1.jpg" alt="Свойство object-fit: fill" style="object-fit: fill;">
    <img src="London2.jpg" alt="Свойство object-fit: fill" style="object-fit: fill;">
    <h2>object-fit: contain</h2>
    <img src="London1.jpg" alt="Свойство object-fit: contain" style="object-fit: contain;">
    <img src="London2.jpg" alt="Свойство object-fit: contain" style="object-fit: contain;">
    <h2>object-fit: cover</h2>
    <img src="London1.jpg" alt="Свойство object-fit: cover" style="object-fit: cover;">
    <img src="London2.jpg" alt="Свойство object-fit: cover" style="object-fit: cover;">
    <h2>object-fit: none</h2>
    <img src="London1.jpg" alt="Свойство object-fit: none" style="object-fit: none;">
    <img src="London2.jpg" alt="Свойство object-fit: none" style="object-fit: none;">
    <h2>object-fit: scale-down</h2>
    <img src="London1.jpg" alt="Свойство object-fit: scale-down" style="object-fit: scale-down;">
    <img src="London2.jpg" alt="Свойство object-fit: scale-down" style="object-fit: scale-down;">
</div>