responsive design - how to adjust CSS image on mobile device while maintaining the aspect ratio -


our site not responsive, , 1 of requirement render images on mobile devices fit screen , running problem, becasue different sized images uploaded web page

and our css code looks like

@media screen , (min-width : 320px) , (max-width: 640px) {               .article-body div img:not(.logoop){                width: 320px !important;                height: 214px !important;             } } 

so works fine 600 x 400 images, because aspect ratio same. however, when have different size images, 400x578, above css code won't work , images stretched , distorted.

what solution here, since no front end dev.

any appreciated.

thanks

modify css following:

@media screen , (min-width : 320px) , (max-width: 640px) {          .article-body div img:not(.logoop){            width: 320px !important;            height: auto;         } } 

this allow specify width of image , height automatically adjust proportional width.


Comments

Popular posts from this blog

cakephp - simple blog with croogo -

How to group boxplot outliers in gnuplot -

bash - Performing variable substitution in a string -