How to make the image in the block always fit without margins?

Question

css

I'm making a bootstrap website using a ready-made template.
It has blocks where the picture is on the left and the text is on the right. In the full version, thanks to the background-size: cover property, I get a cropped image. And I would like it completely. But when the property is set to contain, I get extra space around the image in both the full and mobile versions.
Example: kreozot.com/test/copy-index.html (The first block is cover, the second block is contain.) How can I achieve borderless display in the mobile version? The most interesting thing is that there are the same blocks, only on the contrary - there is a picture on the right, and in the mobile version there is no such trouble with them...

Answer 1

Actually the answer is "no way" and it is not due to the features or limitations of CSS, but to your formulation of the problem. In fact, you want an image (having certain proportions) to be placed completely and without margins in a block with indefinite proportions. This, obviously, is possible only if the proportions of the image and the block are the same, which contradicts the conditions of your task.

Answer 2

A different background-size is not good for media queries for different cases?

.ululyaka {background-size: contain;}
@media screen and (min-device-width: 1600px) {
.ululyaka {background-size: cover;}
}
@media screen and (min-device-width: 456000px) {
.ululyaka {background-size: 100% 50%;}
}