CODEWITHSUNDEEP
cssresponsive-design
doglin
doglin

Reputation: 1741

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

our site is not responsive, and one of the requirement is to render the images on mobile devices so they fit the screen and we are running into a problem, becasue different sized images are uploaded to a web page

And this is what our CSS code looks like

@media only screen and (min-width : 320px) and (max-width: 640px) {


            .article-body div img:not(.logoOP){
               width: 320px !important;
               height: 214px !important;
            }
}

So this works fine for 600 X 400 images, because the aspect ratio is the same. However, when we have a different size images, say 400X578, the above CSS code won't work and the images look really stretched and distorted.

What is a good solution here, since I am no front end Dev.

Any help is appreciated.

Thanks

Upvotes: 1

Views: 2764

Answers (1)

xengravity
xengravity

Reputation: 3589

Modify your CSS to the following:

@media only screen and (min-width : 320px) and (max-width: 640px) {

        .article-body div img:not(.logoOP){
           width: 320px !important;
           height: auto;
        }
}

This will allow you to specify the width of the image and the height will automatically adjust itself proportional to the width.

Upvotes: 2

Related Questions