CODEWITHSUNDEEP
csssass
goddamnyouryan
goddamnyouryan

Reputation: 6906

Crop Images in CSS without setting dimensions

I know object-fit: cover; is a great way to crop images in css, but is it possible to use this in the same way, without specifying the dimensions? Instead just having it fill to the width of the parent element?

Upvotes: 0

Views: 58

Answers (2)

muecas
muecas

Reputation: 4335

You can use object-fit: cover; too. Just make sure to specify width: 100% and height: 100% for the image. For this solution to work, the parent element will need to have a defined height, otherwise the image will be displayed as it is.

<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>

Upvotes: 1

R.P.
R.P.

Reputation: 188

background-size: cover; should do the trick.

Upvotes: 1

Related Questions