I am working with images, and I ran into a problem with aspect ratios.
<img src="big_image.jpg" width="900" height="600" alt="" />
As you can see, height
and width
are already specified. I added a CSS rule for images:
img {
max-width: 500px;
}
But for big_image.jpg
, I receive width=500
and height=600
. How do I set images to be re-sized, whilst keeping their aspect ratios.
25 s
I’ve struggled with this problem quite hard, and eventually arrived at this simple solution:
object-fit: cover;
width: 100%;
height: 250px;
You can adjust the width and height to fit your needs, and the object-fit property will do the cropping for you.
More information about the possible values for the object-fit
property and a compatibility table are available here: https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit
Cheers.