html - CSS Image pos middle in dynamic proportionally height/width div -


need solve little task:

  1. center vertically , horizontally image in div.
  2. div height must proportional width.
  3. div width stretchable (for example 50% of parent div).
  4. image width , height = auto (it must fill div if width or height > div width or height, , have primary size if < div size, , stay proportional).

i know how make 2 , 3.

html:

<div class="container">      <img src="img.png"/> </div> 

css:

.container {     width: 100%;     height: 0;     padding-bottom: 100%; } 

but how center , middle image in div? there lot of ways make 1 task non proportional , non strechable div. dont know how make in full house of tasks.

can help? html , css may any.

did try :

    .container img {         vertical-align : middle     }  

? verticaly align image.


Comments

Popular posts from this blog

c++ - Difference between pre and post decrement in recursive function argument -

php - Nothing but 'run(); ' when browsing to my local project, how do I fix this? -

php - How can I echo out this array? -