css3 - resize portionally image and center in container -


i want display image in full-width gallery. container static:

#container{     width:100%;     height:400px; }  <div id="container">    <img src="myimage.jpg"> </div> 

i have images of different dimensions, want display image in full width without deformate in height, centering image (in height way) diplay in center.

if want keep same aspect ratio images different dimensions best solution patsy issa saying.

use css

#myimage{     background: url("myimage.jpg") no-repeat center center;      -webkit-background-size: cover;     -moz-background-size: cover;     -o-background-size: cover;     background-size: cover;     width:100%;     height:400px; } 

and html

<div id="container">     <div id="myimage"></div> </div> 

jsfiddle: http://jsfiddle.net/qbpy6/


Comments

Popular posts from this blog

php - regexp cyrillic filename not matches -

c# - OpenXML hanging while writing elements -

sql - Select Query has unexpected multiple records (MS Access) -