How to fill out a picture in a container?

There is a fixed container, it must be a picture. There are two possible outcomes.
1. If the picture is narrower than the width of the container, then tie the picture to the full width of the container, and the top and bottom of the picture cropped.
2.If the size of the image larger than the width of the container we cut the left and right part of the image.

I added two pictures with different sizes and made is needed, but I did only dopolnitelnym class.
https://jsfiddle.net/5z8c2rab/
I need size and the right action is automatically applied. Can this be done with CSS without using js? If it is done with js, something like the right thing to do?
March 19th 20 at 08:42
2 answers
March 19th 20 at 08:44
If you are a coder, hammer, it is the task of the server of YAP.
On the server there are more useful things that you can do, what to do image processing. - lisa.Stroman commented on March 19th 20 at 08:47
@lisa.Stroman, I wonder how you solve this question for its clients - Marlo commented on March 19th 20 at 08:50
March 19th 20 at 08:46
in this case the picture just fits, I need to see if larger picture of the container it is cut, if less, then stretched under the entire width of the picture - Clemens5 commented on March 19th 20 at 08:49
@Clemens5,
stretch this:
background-size: cover;
For this task you need to check the image size and assign the appropriate CSS class to the container. I would do so without being a frontend developer. - lisa.Stroman commented on March 19th 20 at 08:52

Find more questions by tags Web DevelopmentHTMLCSS