Good night, interested in the question whether it is possible to arrange the image in the center of the block? For example, there is a block, say 400x200, an image in it, say, 600x300 and it is located by default top: 0; left: 0, if you make the image width: 100%, it will occupy the entire width and will be cut off in height, so I want to clarify whether it is possible to position the image in the center using css tools? Something like background-position: center;

    2 answers 2

    1. centering background

    .crop { width: 400px; height: 200px; background-position: center center; background-repeat: no-repeat; background-size: 100% auto; margin: 5px 0; } 
     <div class="crop" style="background-image: url('http://placehold.it/600x450&text=Covered%20to%20400x200');"></div> <img src="http://placehold.it/600x450&text=Original%20is%20600x450" alt="Original size">

    1. center positioning

     .crop { width: 400px; height: 200px; position: relative; overflow: hidden; margin: 5px 0; } .crop img { max-width: 100%; height: auto; position: absolute; top: 50%; transform: translateY(-50%); } 
     <div class="crop"> <img src="http://placehold.it/600x450&text=Covered%20to%20400x200" alt="Covered Image" /> </div> <img src="http://placehold.it/600x450&text=Original%20is%20600x450" alt="Original size">

    • The first option is not at all in that steppe, but for the background its use (must have and it is better not to invent it), but the second option (if playing a bit with the heights basically does what I wanted. But I thought that this is implemented a little easier. - Constantine Shibaev
    • @ConstantineShibaev Thanks for the feedback! And what is the "wrong steppe" in the first version? I want to understand the future. - Gleb Kemarsky
    • Well, in the first version, everything is used for positioning the background-a, this is if I set the image as a block background. And I'm interested in positioning the image inside the block. To further it was easier to add and modify cases with images. - Constantine Shibaev
    • @ConstantineShibaev Thank you. Understood. - Gleb Kemarsky

    Can.

    http://htmlbook.ru/css/background-size

     background-size: cover;
    • Oh, it’s not at all, and all the more it is used only for the background, but I’m interested in the behavior of one block relative to another (its parent) - Constantine Shibaev