Обрезать изображения в CSS без задания размеров

Question

Я знаю, object-fit: cover; - отличный способ обрезать изображения в css, но возможно ли использовать это таким же образом, без указания размеров? Вместо того, чтобы заполнить его до ширины родительского элемента?

Answer 1

Вы также можете использовать object-fit: cover;. Просто убедитесь, что для изображения указаны width: 100% и height: 100%. Чтобы это решение работало, родительский элемент должен иметь определенную высоту, в противном случае изображение будет отображаться как есть.

<p>Parent element with no dimensions (default width to 100%): will maintain image aspect ratio (all image is visible).</p>
<div>
  <img src="https://img.elo7.com.br/product/original/1B9A0FE/painel-1x0-70-bob-esponja-painel.jpg" style="object-fit: cover; width: 100%; height: 100%;">
</div>
<p>Parent element with specified dimensions: image will cover the area.</p>
<div style="width: 300px; height: 100px;">
  <img src="https://img.elo7.com.br/product/original/1B9A0FE/painel-1x0-70-bob-esponja-painel.jpg" style="object-fit: cover; width: 100%; height: 100%;">
</div>

Answer 2

background-size: cover; должен сделать трюк.