Automatically resize images with browser size using CSS

by

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

for example :

img {
    max-width: 100%;
    height: auto;
    width: auto\9; /* ie8 */
}

and then any images you add simply using the img tag will be flexible

JSFiddle example here. No JavaScript required. Works in latest versions of Chrome, Firefox and IE (which is all I’ve tested).

More Related Contents:

  1. Does “display:none” prevent an image from loading?
  2. Why does the order of media queries matter in CSS?
  3. Making an iframe responsive
  4. Common breakpoints for media queries on a responsive site
  5. Should I use max-device-width or max-width?
  6. Is the viewport meta tag really necessary?
  7. How can I resize an image dynamically with CSS as the browser width/height changes?
  8. Common CSS Media Queries Break Points [duplicate]
  9. What are the rules for CSS media query overlap?
  10. Responsive CSS triangle with percents width
  11. Swap DIV position with CSS only
  12. css grid of squares with flexbox
  13. How to style a div to be a responsive square? [duplicate]
  14. Can I style the resize grabber of textarea?
  15. How to make a element expand or contract to its parent container?
  16. Customize Bootstrap 4’s grid-system Breakpoints
  17. Responsive Images with CSS
  18. How to implement wordwrap on jqGrid which works on IE7, IE8 and FF
  19. Which are the most important media queries to use in creating mobile responsive design?
  20. Maintain div aspect ratio according to height
  21. Set div height equal to screen size
  22. How to make responsive table [closed]
  23. Make table cells square
  24. How can I avoid media query overlap?
  25. In a bootstrap responsive page how to center a div
  26. Bootstrap Responsive Text Size [duplicate]
  27. Single vs multiple stylesheets in responsive web design
  28. Sass and rounding down numbers. Can this be configured?
  29. Media Queries – Mobile vs Desktop Browser
  30. How to change Bootstrap navbar collapse breakpoint

Leave a Comment