Hide image In responsive web design layout.

3 comments

1. Using ‘display: none’ on imgs will still download the image which is not recommended as it’s an http request gone waste (you can see this by looking at the network tab in your browser’s inspector[right click, inspect element in Chrome]. just refresh the page and you’ll see each asset being downloaded and the time it takes to download it.).
   Rather you could make those specific images that you do not wish to load as background-images on divs.
   
   Then all you need to do is:

   @media (max-width: x) {
       .rwd-img {
           background-image: none;
           }
   

   Of course you would have to define the height and width of the image for your div in your CSS, but that’s a better option than sacrificing user experience. 🙂

   Links of interest:
   
   http://css-tricks.com/on-responsive-images/
   http://mattstow.com/responsive-and-retina-content-images-redux.html

   Log in to Reply

2. You’ll want to use media queries, e.g:

   @media (max-width: 979px) {
      .img { 
         display: none;
      }
   }
   

   You should also look into a framework such as Bootstrap which provides responsive utility classes.

   Log in to Reply

3. Using Cascading Style Sheets with a media query you can hide the image when the viewers screen resolution is lower than a given value like in this example when the screen width is smaller than 640 pixels.

   @media screen and (max-width: 640px) {
   
       .my-image {
           display: none;
       }
   
   }
   

   Log in to Reply