CODEWITHSUNDEEP
htmlcssresponsive-designmedia-queriesresponsive
user7782253
user7782253

Reputation:

Responsive Image in HTML and CSS

what is the best way to create responsive image using css, I'm basically trying to switch the header image when screen is (max-width: 480px) this is the code i have 

<div id="header">
<img src="images/H550xW1250.png" alt="img" width="100%" class="size1280"/>
<img src="images/H683xW480.png" alt="img" width="100%" class="size480"/>
</div>

<style>
@media only screen and (max-width: 480px) {
.size1280 {
    display: none !important;
}
.size480 {
    display: block !important;
}
}
<style/>

Upvotes: 0

Views: 1094

Answers (3)

nwalton
nwalton

Reputation: 2061

As mentioned in Julian B's post, the picture element is made to do this sort of thing.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture https://www.html5rocks.com/en/tutorials/responsive/picture-element/

It lets the browser check the media query and choose the best image file to display. Here's how it might look in your HTML:

<div id="header">    
  <picture>
    <source media="(min-width: 480px) srcset="images/H550xW1250.png">
    <img src="images/H683xW480.png" alt="header image">
  </picture>
</div>

The code above displays the smaller image by default, but the larger image when the browser width is larger than 480px. You can add more src elements if you have more image sizes to toggle.

Note that I'm using a min-width query rather than max-width. This means browsers that don't understand the picture element will display the small image by default.

You can see in the support table for picture that it's supported by most modern browsers. If you need to fully support older IE, there are polyfills available.

Upvotes: 0

Julian B.
Julian B.

Reputation: 43

How about using the picture tag I think this would be much easier. Like this

<picture>
   <source media="(min-width: 480px)" srcset="imgsrc">
   <img src="imgsrc">
</picture>

Upvotes: 2

AGE
AGE

Reputation: 3792

You are doing things mostly correctly, but you are not considering the default styling of the elements. In your case, the only styling you care about is display to be none or block accordingly.

So consider the following example, it does exactly what you want to achieve. The only difference is that I had to add a little extra styling for my images width and height; as well as having to use my own images to represent the example. All you need to do is click on view fullscreen, shrink the browser screen, and watch the magic happen.

What is going on then? I know that the default display attribute will be: block meaning it is visible. But then I let the media query take care of modifying the display to none when the width of the screen reaches a certain point. This helps avoid the use of important since there is nothing to override. I make sure I separate it too, simply because it is easier to read and understand what is going on.

@media only screen and (max-width: 480px) {
  .size1280 {
      display: none;
  }
}

@media only screen and (min-width: 481px) {
  .size480 {
      display: none;
  }
}

.size1280 {
  width: 150px;
  height: 150px;
}

.size480 {
  width: 150px;
  height: 150px;
}
<div id="header">
  <img src="http://via.placeholder.com/150x150?text=1280" alt="img" class="size1280"/>
  <img src="http://via.placeholder.com/150x150?text=480" alt="img" class="size480"/>
</div>

Upvotes: 0

Related Questions