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
Post a Comment