Change the image link dynamically in responsive mode

2 Views

how to change the images link dynamically in responsive mode.
i am working on the wordpress and showing the thumbnails having fixed size 280*200 but in the resolution between 480px to 600px i am wanted to change the thumbnail size to medium(which i have set to 480*200) how i can achieve this?
any script to detect the device resolution and change the img src automatically to medium size thumbnails???
like this

(in desktop versions)

Read More
<img class="attachment-thumb-small wp-post-image" src="280x200.jpg">

(in mobile versions)

<img class="attachment-thumb-medium wp-post-image" src="480x200.jpg">

Post Views: 2

Related posts

Leave a Reply

2 comments

  1. try adding media query to your css 

    @media screen and (min-width: 480px) and (max-width: 600px) {
    .attachment-thumb-medium, .wp-post-image{
width: 480px;
height: 200px;
    }
}

  2. You have two options.

    A. You can set images in CSS as background for empty <div> elements. Then you can use a media query in CSS to change the image source.

    .thumbnail {background-image:url("280x200.png")};
@media screen and (min-width: 480px) {
    .thumbnail {background-image:url("480x200.png")};
}

    B. You can detect the screen size using JavaScript, and then change the image tags in your PHP code – or using JavaScript again. It’s more work, though. See PHP – Detect the display resolution for details.