To crop a picture with a certain aspect ratio?

There are a number of pictures with random aspect ratio of each.
You want to align them on the grid, at the same time, so that each picture was with a ratio of 2x3..

I understand that this can be done with js, but I really hope that I don't need to cram for such a trivial task.

And now, here's another problem, the height of the images is determined by the height of the parent block..

And yet, everything that does not fit in the size of the cut
July 4th 19 at 23:40
2 answers
July 4th 19 at 23:42
Solution
I should have made the container transparent image with the desired aspect ratio (such as 2x3 pixels) and stretch the full width of the parent. But the real picture is placed in the container and absolutely position (say 0:0, not included clipped). Naturally the container is assigned overflow:hidden;

By the way here is a similar question: https://toster.ru/answer?answer_id=852886
There is my more detailed answer.
The solution of course, but it was too dirty..
I have a few opinions listened to(

Although to some extent it's sort of cool in the sense that if this picture will be priority, until the page is loaded, not empty space (the grey one will do it).

But still want a more elegant solution) - Ezra54 commented on July 4th 19 at 23:45
See what else will advise. I will be glad to learn a new way ) - ladarius.Schmeler9 commented on July 4th 19 at 23:48
All the same, I was wrong, this is a very elegant solution.. Even a safety net, that all would not have floated - Ezra54 commented on July 4th 19 at 23:51
July 4th 19 at 23:44
make a block with a ratio of 2x3
it inserts the image with the following CSS:
display: block;
width: 100%;
object-fit: cover;


key rule
object-fit: cover;

If you need images of different sizes with a given ratio, means TSSS it will be difficult to make.
how to make a unit with a certain ratio? - Ezra54 commented on July 4th 19 at 23:47
: https://css-tricks.com/snippets/sass/maintain-aspe... then mixin and an example of pure code how to make a unit ratio. In the comments there are links to the stack. About cross-browser in the shower don't know how it will behave since it does not test. - ladarius.Schmeler9 commented on July 4th 19 at 23:50

Find more questions by tags CSSHTMLWeb Development