2

I'd like to center an image (that changes dimensions according to the screen size) horizontally vertically in a div. That div is positioned absolute and has a height of 100%. Under that div, another div is placed.

I made a visual example

    <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>

I want to center the test image vertically in the red div.

Thanks!

RevanthKrishnaKumar V.
  • 1,855
  • 1
  • 21
  • 34
thezucc
  • 111
  • 1
  • 2
  • 3

2 Answers2

0

Do something like this, (there are many other ways, this is one way of achieving what you described )

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

I have added this to your 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%;
}

And slight modification to your html like this,

<div class="img"></div>
Nagendra Rao
  • 7,016
  • 5
  • 54
  • 92
0

http://jsfiddle.net/sY4dh/ Add background-size property to previous answer/

        #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;
        }
VKU
  • 1