How to properly resize images with CSS/HTML?

Question

css

There are images of different sizes (width, height), which are displayed using <img src="">. I need to reduce this image to 64px (width, height). I show you how it <img src="" width="64px" height="64px">works. But images of different sizes are reduced randomly. Either compressed or flattened. How to make it so that the proportions of the image are preserved at 64px height and width?
Bootstrap 3 present

Answer 1

Here look

Answer 2

That's right - don't change. Except in rare special cases, the image must be served by the server at the correct size.

Answer 3

if only img then it is necessary to determine what is more important the height or width of the images
in their styles
display: inline-block \ block;
width: 64px(auto);
height: auto(64px);
in the first case, the priority of the width, in the second, the height will be.
I usually use in such cases a block with given dimensions style="background: url(img.jpg) center center;"
you can still play around with background-size
but in general Suntechnic is right, squeeze the photos under the necessary containers on the server side and cache them
in bootstrap 3 there is an img-respontive class by the way.

Answer 4

In fact, in order to get more or less the correct proportions of the picture, you need to write a script that on the server side will calculate the proportions for your size, render the picture and give you the finished one in your size, but in any case, use this method only if you need to process a lot images of different aspect ratio, as it will not give the desired result.

Answer 5

What would be the proportions try to specify the maximum
max-width: 64px, max-height: 64px;
If you include an image in a css file, then set the size
background-size: 64px;