0

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).

3
  • you can use media queries for this Jan 16, 2014 at 12:37
  • But Media queries require fixed break points... Jan 16, 2014 at 12:39
  • put width="100%" in your <img> tag
    – Richa
    Jan 16, 2014 at 12:39

4 Answers 4

2

Use

max-width: 100%;

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

0
2

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

1

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.

0

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.