CSS: вертикальное центральное отзывчивое изображение в пределах 100% высоты абсолютного div

Я хотел бы центрировать изображение (которое меняет размеры в зависимости от размера экрана) по горизонтали и вертикали в div. Этот div расположен абсолютно и имеет высоту 100%. Под этим div помещается другой div.

Я сделал наглядный пример

    <body>
    <div id="wrapper">
    <div id="div1">
        <div id="center">
            <img src="http://www.vilna.nl/wp-content/uploads/2013/10/test.jpg">
        </div>
    </div>
    <div id="div2">
    You can't see this without scrolling
    </div>
</div>
</body>

Я хочу центрировать тестовое изображение вертикально в красном div.

Спасибо!


html css center absolute
person user3103099    schedule 15.12.2013    source источник
comment
мой ответ: stackoverflow.com/a/21919578/1491212   -  person Armel Larcier    schedule 27.02.2014

Ответы (2)


arrow_upward
0
arrow_downward

http://jsfiddle.net/sY4dh/ Добавить свойство background-size к предыдущему ответу/

        #div1{
            background-color: red;
            background-image: url('http://www.vilna.nl/wp-content/uploads/2013/10/test.jpg');
            background-position: center center;
            background-repeat: no-repeat;
            background-size: 40% auto;
        }
person VKU    schedule 15.12.2013

arrow_upward
0
arrow_downward

Сделайте что-то вроде этого (есть много других способов, это один из способов достижения того, что вы описали)

http://jsfiddle.net/nagendra_rao/9xZxk/4/

Я добавил это в ваш css,

.img{
    width:100%; 
    height:100%; 
    background:url('http://www.vilna.nl/wp-content/uploads/2013/10/test.jpg') center center no-repeat;     /* this will automatically place your image file centred horizontally and vertically.*/ 
    background-size: 50% auto;
}
#center{
 height:100%;
}

И небольшая модификация вашего html, как это,

<div class="img"></div>
person Nagendra Rao    schedule 15.12.2013
comment
спасибо, но теперь изображение больше не масштабируется. Ширина изображения должна соответствовать размеру экрана. Любое решение для этого? - person user3103099; 15.12.2013
comment
обновили код. теперь он будет изменять размер в соответствии с шириной браузера. - person Nagendra Rao; 15.12.2013