CODEWITHSUNDEEP
htmlcssimageresizewidth
Jérôme Verstrynge
Jérôme Verstrynge

Reputation: 59634

How to conditionally resize image if screen not wide enough, with CSS?

Say I have a 400 px wide and 250 px high image. The user resizes the screen or loads the page on a smartphone.

Say the screen width is 320 px wide. The 400 px image won't fit.

Is there a way to automatically resize the image (and keep proportions) when the screen is not wide enough, using CSS?

In other words the image should be resized from 400px wide to 320px wide (for example).

Upvotes: 0

Views: 1788

Answers (4)

Abhitalks
Abhitalks

Reputation: 28437

You need to specify both min and max:

demo: http://jsfiddle.net/abhitalks/Vv9RT/

css:

img {
    min-width: 220px;
    max-width: 420px;
    width: 100%;
}

Try changing the panel size in the fiddle. min-height will ensure a minimum acceptable size when the screen size gets too low. max-height will ensure a maximum size so that it doesn't get huge.

100% width will keep it within bounds.

Upvotes: 1

Venu immadi
Venu immadi

Reputation: 1605

by using the css3 media queries u can do make possible

ex: @media screen (max-width:480px){
      img{
           width:320px;
     }
}

or 

 img{ max-width:100%}

or else you can use both.. 'img{ max-width:100%}' place before the media quires

Upvotes: 0

Fabrizio Calderan
Fabrizio Calderan

Reputation: 123418

No need to use mediaqueries for this specific case: just define

#yourimage {
   width: 100%;
   max-width: 400px;
}

this will ensure a full-width image for every viewport width up to 400px

Upvotes: 2

Mihey Egoroff
Mihey Egoroff

Reputation: 1542

Use 

max-width: 100%;

Google responsive images for more information. http://mobile.smashingmagazine.com/2013/07/08/choosing-a-responsive-image-solution/

Upvotes: 2

Related Questions