Hello.
There is a block width:100%;height:300px;overflow:hidden;
There is an image inside it position:relative;width:100%;height:auto;
Accordingly, the image starts from the upper left corner of the block, stretches 100% in width, and is cropped at the bottom after 300px, due to overflow:hidden;
Task: to make the image centered vertically, i.e. the block displayed 300px from the central part of the picture, and the top and bottom edges were cut off.
Who can that advise? The option to make a picture background is known to me, and is being considered last.

    3 answers 3

    First, through the top place the beginning of the image at a level of 50% of the height of the parent, then, through the transform shift the picture along the Y axis 50% higher, but already the size of the image itself.

     .b-pict { width: 100%; height: 300px; overflow: hidden; } .b-pict > img { position: relative; top: 50%; width: 100%; height: auto; transform: translateY(-50%); } 
     <div class="b-pict"> <img src="http://placehold.it/100x100" alt=""> </div>

      For such purposes, you can use the object-fit property. Since so far it is not supported everywhere, you need to make a fallback using @supports .

       .b-pict { width: 100%; height: 300px; overflow: hidden; } .b-pict > img { position: relative; width: 100%; height: 100%; } @supports (object-fit:cover) { .b-pict > img { object-fit: cover; } } @supports not (object-fit: cover) { .b-pict > img { height: auto; top: 50%; transform: translateY(-50%); } } 
       <div class="b-pict"> <img src="https://placeimg.com/200/200/any" alt=""> </div> <br> <div> <img src="https://placeimg.com/200/200/any"> </div>

        The solution is without explicitly specifying the dimensions that I use when I need to align the block vertically, but its final height is unknown. It even works in IE9. Example:

         .container-fluid { height: 400px; background-color: lightgreen; overflow: hidden; position: relative; text-align: center; } /* Обертка */ .container-fluid:before { content: ''; height: 100%; display: inline-block !important; vertical-align: middle; } /* Блок, который нужно выровнять */ .row { display: inline-block; vertical-align: middle; } 
         <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> <div class="container-fluid"> <div class="row"> <div class="col-md-2 col-md-offset-5 text-center "> <div class="play-btn"> <img src="http://elzol.lamusica.com/images/core/play.png" alt="Play"> <p>Some Button</p> </div> </div> </div> </div>

        The easiest way to do this is through flexbox.

         .container-fluid { height: 400px; background-color: lightgreen; display: flex; /* Центрируем по вертикали */ align-items: center; /* Центрируем по горизонтали */ justify-content: center; } 
         <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> <div class="container-fluid"> <div class="row"> <div class="col-md-2 col-md-offset-5 text-center "> <div class="play-btn"> <img src="http://elzol.lamusica.com/images/core/play.png" alt="Play"> <p>Some Button</p> </div> </div> </div> </div>

        If the height of the parent element is known (as in your example), then simply:

         .container-fluid { height: 400px; background-color: lightgreen; overflow: hidden; position: relative; } .row{ line-height: 400px; } 
         <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <div class="container-fluid"> <div class="row"> <div class="col-md-2 col-md-offset-5 text-center "> <div class="play-btn"> <img src="http://elzol.lamusica.com/images/core/play.png" alt="Play"> <p>Some Button</p> </div> </div> </div> </div>

        Or so:

         .container-fluid { height: 400px; background-color: lightgreen; overflow: hidden; position: relative; } .row{ position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); } 
         <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <div class="container-fluid"> <div class="row"> <div class="col-md-2 col-md-offset-5 text-center "> <div class="play-btn"> <img src="http://elzol.lamusica.com/images/core/play.png" alt="Play"> <p>Some Button</p> </div> </div> </div> </div>

        • You answered the question title correctly, but the essence of the question was different. - Sasha Omelchenko