Possible to swap image in header when using responsive design?

Question

I'm learning responsive design and I wonder If I can swap an image in the header due to the viewport size? I can scale the image by using different settings of the width, like a 100% width when it's in a small viewport and have a width of 30% when the viewport is bigger. But I would also like to change to another image as well. Preciate some help to solve this!

HTML:

<header class="mainHeader">
    <img src="img/logo.gif">

    <nav>
        <ul>
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#">Portfolio</a></li>
        <li><a href="#">About</a></li>
        </ul>
    </nav>

</header>

CSS normal:

.mainHeader img {
width: 30%;
height: auto;
margin: 2% 0;
}

CSS:

@media only screen and (min-width: 150px) and (max-width: 600px)
{

.body {
width:  90%;
font-size:  100%;
}

.mainHeader img {
width: 100%
}

}

Maybe this link will help you http://stackoverflow.com/questions/2182716/how-can-we-specify-src-attribute-of-img-tag-in-css — Tasos K., Nov 03 '13 at 11:16
@codingstill OK, but it looks like I can use different types of images if I place them like background images in the header element then and change background image in CSS!? Hmm, but wouldn't it be possible to detect viewport size in javascript and then change image easy with jQuery? — 3D-kreativ, Nov 03 '13 at 11:21
If you want to use jQuery for this, you can just change the image's src attribute with the resize(..) event handler. — Tasos K., Nov 03 '13 at 11:23

score 1 · Answer 1 · answered Nov 03 '13 at 11:24

I would do it as per below:

<header class="mainHeader">
    <img src="img/logo.gif" id="img1">
    <img src="img/logo2.gif" id="img2">

    <nav>
        <ul>
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#">Portfolio</a></li>
        <li><a href="#">About</a></li>
        </ul>
    </nav>

</header>

and in CSS reverse the display for images as per your desired width:

@media only screen and (min-width: 150px) and (max-width: 600px)
{

.body {
width:  90%;
font-size:  100%;
}

.mainHeader img #img1 {
width: 100%;
display:block;
}

.mainHeader img #img2 {
width: 100%
display:none;
}


}

how would you add a css transition to this so it doesn't look so abrupt? — chrislhardin, May 02 '14 at 18:48

Roko C. Buljan · Answer 2 · 2016-06-07T11:48:19.053

0

DEMO

<header class="mainHeader">
  <img src="image1.jpg" alt="">
  <img src="image2.jpg" alt="">
</header>

.mainHeader img {
    width: 30%;
    height: auto;
    margin: 2% 0;
}
.mainHeader img+img {
  display:none;
}

@media (min-width: 150px) and (max-width: 600px){

  .mainHeader img {
    display:none;
    width: 100%
  }
  .mainHeader img+img {
    display:block;
  }

}

edited Jun 07 '16 at 11:48

answered Nov 03 '13 at 11:23

Roko C. Buljan

196,159
39
305
313

Hi Roko, for some reason the two images are showing up on my phone. Although one of them is hidden on the desktop, they both show at the same time on the phone. Has anyone go this working? Would like to know. Thanks for the code snippet though. – Helen Neely Jun 07 '16 at 11:27
@HelenNeely try now. (I removed `screen only and`) – Roko C. Buljan Jun 07 '16 at 11:48
Thanks again. Nothing seems to have changed - the two images are still showing on my phone. I'm using your code in a responsive email so not sure if that makes any difference. My aim is to show one image on outlook and a different one on mobile devices. – Helen Neely Jun 07 '16 at 12:14

score 0 · Answer 3 · answered Jul 24 '15 at 11:08

0

with js matchMedia

 <script>
 if (window.matchMedia("(min-width: 150px) and (max-width: 600px)").matches) {
     //swap image
}
 </script>

answered Jul 24 '15 at 11:08

Matoeil

6,851
11
54
77

Possible to swap image in header when using responsive design?

3 Answers3