This question has already been answered:

There is a picture whose width is larger than the parent div'a (overflow: hidden;). How to make it so that only the central part of the picture is visible, while preserving the proportions of the picture, while reducing the width of the div and so that the picture occupies the entire height of the div?

Reported as a duplicate by members of user194374, Denis Bubnov , Community Spirit ♦ 21 Feb '17 at 13:22 .

A similar question was asked earlier and an answer has already been received. If the answers provided are not exhaustive, please ask a new question .

    2 answers 2

    Option 1: make a picture width `div`

    .div { width: 100%; height: 500px; } img { max-width: 100%; height: auto; display: block; margin: auto; } 
     <div class="div"> <img src="https://mobidevices.ru/images/2017/02/iPhone-7.jpg" alt=""> </div>

    Option 2: make a picture `requirements to` div`

     .div { width: 100%; height: 500px; background: url("https://mobidevices.ru/images/2017/02/iPhone-7.jpg") no-repeat 50% / contain; } 
     <div class="div"></div>

    • Yes, as an option) Thank you! I just need to be the very picture, and not as a wallpaper. - gais.05
    • @ gais.05 finalized - Vadizar
    • I took advantage of the same background'om thanks!) - gais.05

     * { padding: 0; margin: 0; } div { margin: 15vh auto auto auto; width: 40vw; height: 70vh; position: relative; border: 1px solid black; overflow: hidden; } img { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } 
     <div> <img src="https://mobidevices.ru/images/2017/02/iPhone-7.jpg"> </div>

    • Thank! I decided to do the background. picture, it turned out) background-size: cover; background-position: center bottom; - gais.05