Variable Visions

Articles CSS Responsive-Images


tutorials - CSS and Web-Development.

Responsive Images

Published Tue. Sep. 18, 2012


Put max-width: 100%; and height: auto; on any or all img tags to make them take 100% of their parent container. Put the rule in a media query to activate only on smaller screen sizes...but watch out if you place it in a 959 or 767 media query and the parent containers are 100% wide...the images will be huge and pixelated if the quality is not there. It's more about the size of the container and that the image will fill it up.