How to keep aspect ratio of downsized images? - html

Question

i'm building an website and came across this problem: i have a image with 345x300.
In my div, she gets the widths of 82 x 118, staying like this:
I need the image to have 82 x 82 width, and when i set it gets flattern.
What can i do to fix this problem? Sorry for my bad english.
If needed, this is the website i'm working: https://2018.escambofotografico.com.br/ (the problem i'm talking its in the end of the page)
Thanks everyone!

Answer 1

You can also do this using the object-fit css property.
I made a little example for you on how it works.
$(function(){
$('.list-group button').click(function(e) {
e.preventDefault()
$that = $(this);
$that.parent().find('button').removeClass('active');
$that.addClass('active');
$("img").removeClass();
$("img").addClass($that.prop('id'));
});
})
img {
height: 182px;
width: 182px;
}
.fill {
object-fit: fill;
}
.contain {
object-fit: contain;
}
.cover {
object-fit: cover;
}
.none {
object-fit: none;
}
.scale-down {
object-fit: scale-down;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid">
<div class="row">
<div class="col-6">
<div class="list-group">
<button type="button" class="list-group-item list-group-item-action" id="fill">object-fit: fill;</button>
<button type="button" class="list-group-item list-group-item-action" id="cover">object-fit: cover;</button>
<button type="button" class="list-group-item list-group-item-action" id="contain">object-fit: contain;</button>
<button type="button" class="list-group-item list-group-item-action" id="none">object-fit: none;</button>
<button type="button" class="list-group-item list-group-item-action" id="scale-down">object-fit: scale-down;</button>
</div>
</div>
<div class="col-6">
<img src="http://coveractionspremium.com/images/SoftwareBoxCD-model6v2-coveractions1.jpg" alt="">
</div>
</div>
</div>
Here is a Codepen you can play around with:
https://codepen.io/gurgen/pen/jKmXXW

Answer 2

When you set the dimensions of an html image tag, those are the dimensions that will display. If you take a rectangular image and display it as a square, you're going to get some distortion. The solution is to either edit your images with some padding to make them the exact size (and shape) you want, or else display them at the same aspect ratio that the images start at.
Also, note that your image is much larger than you are displaying. If bandwith for you server or customers is a concern, you're better off to resize the image to the size you want to display. The lightroom image is approximately 42Kb, but you might be able to resize it at 82x82 and send a ~6Kb file instead. For a mobile or low bandwith customer, that savings multiplied by 12 images is 432Kb. Your server has to serve up those wasted bytes to every customer, which you may be paying for.
Looking at some of your other images, you're scaling them up. Modern browsers will try to scale images smoothly, but you'll always lose some display quality doing this. Your best bet is to size images at the exact dimensions you want to display when you can.

Answer 3

To avoid stretching images in a fixed size container, you can set the max-height and max-width on the image tag to 100%. Once the height or width fills the container, it won't stretch the image.
So, if you want your image in a 82x82px container, you can do this for each image:
<div class="thumbnail">
<img src="...">
</div>
With the following CSS:
.thumbnail {
height: 82px;
width: 82px;
}
.thumbnail > img {
max-height: 100%;
max-width: 100%;
}