Resizing the image proportionally and positioning it center

Question

I am trying to show the image in full page and if the size of the browser window reduces, the image should resize proportionally.

I should be able to get the image to center of the page when browser size reduces.

I have tried something like this fiddle

HTML

<div>
    <img src="http://yournaperville.com/wp-content/uploads/2013/06/disney-world.jpg"/>
</div>

CSS

*{
 margin: 0;
}
html{
  background-color: #666666;
}
img { 
 height: auto;
 width: 100%;
}
div{
 height: auto;  
 width: 100%;
 position: absolute;
 top:0;
 bottom: 0;
 left: 0;
 right: 0;
 margin: auto;
}

I am not sure how far I am right. can anyone help me

Take a look at the css `zoom` tag. Works like charm, actually. — arkascha, Jan 29 '15 at 20:14
check this http://stackoverflow.com/questions/787839/resize-image-proportionally-with-css?rq=1 — J Prakash, Jan 29 '15 at 20:45
@JPrakash i think the proportional resize works as said in that question. I also need the image to be in center when size reduces — practice2perfect, Jan 29 '15 at 21:11

score 0 · Answer 1 · answered Jan 30 '15 at 04:14

0

change img height to 100% and overflow:hidden to html. Works for me!

answered Jan 30 '15 at 04:14

Jason

698
4
12

I don want to expand the image vertically when browser size is reduced. hope u read my use case – practice2perfect Jan 30 '15 at 16:53

Resizing the image proportionally and positioning it center

1 Answers1