Отзывчивый вертикальный центр с переполнением скрыт

После поиска как, так и Google мне все еще интересно, как вертикально центрировать изображение, которое больше, чем его родительский элемент. Я не использую высоту, просто max-height, потому что я хочу сделать отзывчивое решение без jQuery. Если возможно,

Вот какой код:

<div style="max-height: 425px; overflow: hidden;">
    <img src="http://img.youtube.com/vi/jofNR_WkoCE/maxresdefault.jpg">
</div>

Ответ 1

чтобы центрировать вертикально большее изображение, вы можете использовать конструкцию и css ниже

<div class="img-wrapper">
    <img src="http://img.youtube.com/vi/jofNR_WkoCE/maxresdefault.jpg">
</div>

И css:

.img-wrapper{
    position: relative;
    overflow:hidden;
    height:425px;
}

.img-wrapper img{
    position: absolute;
    top:-100%; left:0; right: 0; bottom:-100%;
    margin: auto;
}

FIDDLE

Ответ 2

Я нашел способ заставить его работать только с max-height (в отличие от фиксированной высоты), установленным в контейнере.

Плохая новость заключается в том, что для этого требуется дополнительный элемент оболочки.

HTML:

<div class="img-wrapper">
    <div class="img-container">
        <img src="http://img.youtube.com/vi/jofNR_WkoCE/maxresdefault.jpg">
    </div>
</div>

CSS

.img-wrapper {
    overflow: hidden;
    max-height: 425px;
}

.img-container {
    max-height: inherit;
    transform: translateY(50%);
}

.img-wrapper img {
    display: block;
    transform: translateY(-50%);
}

Ответ 3

Попробуйте

<html>
<head>
</head>
<body >

    <div style="max-height: 425px;border:1px solid;max-width:500px;overflow:hidden">
        <img src="http://img.youtube.com/vi/jofNR_WkoCE/maxresdefault.jpg" style='position: relative;top: -231px;left: -500px;'>
    </div>
</body>
</html>

Ответ 4

Если вам не нужно использовать теги img (fiddle):

CSS

.imageContainer {
    margin: 0; 
    height: 200px; /* change it to your value*/
    width: 200px; /* or use fixed width*/
    background: transparent url('') no-repeat center;
    overflow: hidden; 
}

HTML

<div class="imageContainer" style="background-image: url('http://deepwish.com/site/wp-content/uploads/2013/10/butterfly2_large.jpg');"></div>

Ответ 5

если вы хотите сделать отзывчивое изображение, попробуйте использовать <div style="">
<img src="http://img.youtube.com/vi/jofNR_WkoCE/maxresdefault.jpg" width="100%" height="100%">
</div>