Menu
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.
227
The Simple Solution Using CSSBy setting the width property to 100%, you are telling the image to take up all the horizontal space that is available. With the height property set to auto, your image's height changes proportionally with the width to ensure the aspect ratio is maintained.
css('padding-bottom', ratio); }); And having this you just set attr data-keep-ratio to height/width and that's it.
Try removing width="100%", or set the width manually based on the aspect ratio.
img { display: block; max-width:230px; max-height:95px; width: auto; height: auto; }<p>This image is originally 400x400 pixels, but should get resized by the CSS:</p> <img width="400" height="400" src="http://i.stack.imgur.com/aEEkn.png">This will make image shrink if it's too big for specified area (as downside, it will not enlarge image).
196
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.
40
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
