How can I resize an image dynamically with CSS as the browser width height changes

Question

I wonder how I could make an image resize along with the browser window  here is what I have done so far  or download the whole site in a ZIP    This works okay in Firefox  but it has problems in Chrome  the image does not always resize  it somehow depends on the size of the window when the page was loaded   This also works okay in Safari  but sometimes the image is loaded with its minimum width height  Maybe this is caused by the image size  I am not sure   If it loads okay  try to refresh several times to see the bug    Any ideas on how could I make this more bulletproof   If JavaScript will be needed I can live with that  too  but CSS is preferable

User · Answer

This can be done with pure CSS and does not even require media queries   To make the images flexible  simply add max-width 100  and height auto  Image max-width 100  and height auto works in IE7  but not in IE8  yes  another weird IE bug   To fix this  you need to add width auto 9 for IE8  source  http   webdesignerwall com tutorials responsive-design-with-css3-media-queries  CSS  img       max-width  100       height  auto      width  auto 9     ie8       And if you want to enforce a fixed max width of the image  just place it inside a container  for example   lt div style  quot max-width 500px  quot  gt       lt img src  quot     quot    gt   lt  div gt   JSFiddle example here  No JavaScript required  Works in latest versions of Chrome  Firefox and IE  which is all I ve tested

User · Answer

2018 and later solution   Using viewport-relative units should make your life way easier  given we have the image of a cat     Now we want this cat inside our code  while respecting aspect ratios    x000D   x000D  img   x000D    width  100   x000D    height  auto  x000D    x000D   lt img src  https   www petmd com sites default files petmd-cat-happy-10 jpg  alt  cat  gt  x000D   x000D   x000D    So far not really interesting  but what if we would like to change the cats width to be the maximum of 50  of the viewport    x000D   x000D  img   x000D    width  100   x000D    height  auto  x000D       Magic     x000D    max-width  50vw  x000D    x000D   lt img src  https   www petmd com sites default files petmd-cat-happy-10 jpg  alt  cat  gt  x000D   x000D   x000D    The same image  but now restricted to a maximum width of 50vw vw   viewport width  means the image will be X width of the viewport  depending on the digit provided  This also works for height    x000D   x000D  img   x000D    width  auto  x000D    height  100   x000D    max-height  20vh  x000D    x000D   lt img src  https   www petmd com sites default files petmd-cat-happy-10 jpg  alt  cat  gt  x000D   x000D   x000D    This restricts the height of the image to a maximum of 20  of the viewport

User · Answer

window onresize   function        var img   document getElementById  fullsize        img style width    100         In IE onresize event gets fired on every pixel change  width or height  so there could be performance issue  Delay image resizing for few milliseconds by using javascript s window setTimeout     http   mbccs blogspot com 2007 11 fixing-window-resize-event-in-ie html

User · Answer

Set the resize property to both  Then you can change width and height like this    classname img    resize  both    width 50px    height 25px

User · Answer

Try    img     width 100vw     Matches to the Viewport Width       height auto     max-width 100   important      Only works with display block and inline block  this has no effect on flex items as I ve just spent ages trying to find out

User · Answer

Initially  I was using the following html css   img     max-width  100     height  auto    width  auto 9     ie8         lt div gt      lt img src         gt   lt  div gt    Then I added class  img  to the  lt div gt   like this     lt div class  img  gt     lt img src         gt   lt  div gt    And everything started to work fine

User · Answer

You can use CSS3 scale property to resize image with css    image hover     -webkit-transform scale 1 2              transform scale 1 2      image     -webkit-transition  all 0 7s ease             transition  all 0 7s ease      Further Reading    CSS3 2D Transforms CSS3 Hover Effect Transitions  Transformations  Animations

User · Answer

Just use this code  What most are forgeting is to specify max-width as the max-width of the image  img          height  auto      width  100       max-width  300px      Check this demonstration http   shorturl at nBKVY

User · Answer

Are you using jQuery   Because I did a quickly search on the jQuery plugings and they seem to have some plugin to do this  check this one  should work   http   plugins jquery com project jquery-afterresize  EDIT   This is the CSS solution  I just add a style  width  100    and works for me at least in chrome and Safari  I dont have ie  so just test there  and let me know  here is the code                lt div id  gallery  style  width  100   gt                   lt img src  images fullsize jpg  alt    id  fullsize    gt                   lt a href     id  prev  gt prev lt  a gt                   lt a href     id  next  gt next lt  a gt               lt  div gt

[css] How can I resize an image dynamically with CSS as the browser width/height changes?

Examples related to css

Examples related to image

Examples related to browser

Examples related to resize

Examples related to window