My theme has the option( like any other theme I guess) to chose a predefined featured image size( thumbnail, medium ...etc). I chose the image to be thumbnail, made it 150x150 in media settings but my problem is with 480px screens. Here I want the thumbnail to be full width instead of 150px. If I add width: 100%; rule in CSS I get 150px images stretched to 480px and they look awfull.

The code that outputs my featured images is this:

function omega_entry() {

    if ( is_home() || is_archive() || is_search() ) {
        if(omega_get_setting( 'content_archive_thumbnail' )) {
            get_the_image( array( 'meta_key' => 'Thumbnail', 'default_size' => omega_get_setting( 'image_size' ) ) ); 

and I want to have another featured image size for max. 480px, nothing fancy, just as that:

<?php the_post_thumbnail('thumbnail', array('class' => 'myclass')); ?>  

I know that resolution may be obsolete but I want my website to look decent on most devices, event the lowend ones. I guess CSS media queries can't help me here and beside those my knowledge is limited.

Thank you so much for any help.


As a rule of thumb, responsive design should not be handled on the server side. The two main reasons for this is:

  1. The only kind of detection you can do on the server side is User-agent sniffing. Responsive design should be based on feature detection, not user agents.

  2. It's too easy to run into caching problems etc. (Ie. mobile users get a cached desktop version).

For responsive images, here's what I normally do:

<img src="small.jpg" data-lg="large.jpg" data-sm="small.jpg"> and I use JavaScript to switch out the src attribute, depending on either window.screen or window.innerWidth.

You can also have two image tags and use CSS media queries to swap between them. but then, of course, you have two images where you should really just have one.

switching out the src of a single img tag most closely resembles what's going on in the new picture element with srcset.

| improve this answer | |
  • Thanks mate. I didn't know about this at all. I gues I have to learn something about it before starting to use it but looks like something that cand do it for me:) And yes as funny as may seem I thought too about having 2 images and swap them in CSS with display: none; before I posted my issue but wanted to know if there is something better. – user51649 May 20 '14 at 10:34

Just use responsive design techniques so instead of using the 'thumbnail' version of the image use the 'Large' or 'Medium' size instead and then use CSS to scale down the image for you.

img {
width: 100%;
height: auto;
| improve this answer | |
  • Thak you for the tip. It could be a solution but donno, I really like the thumbnails too because they give me the same width and height across all the website. If no one else can help me( or has a idea for this), maybe I'll go that way. – user51649 May 20 '14 at 9:06
  • I wrote this to keep images the same size some time ago when using just CSS. Maybe can help you. mattroyal.co.za/2014/05/jquery-equal-h…nsive-websites/ – Matt Royal May 20 '14 at 9:28
  • Thank you so much. I will keep your code for a later use and bookmarked your page for a later visit :) I think I found a slightly better solution from Ahrengot. – user51649 May 20 '14 at 10:28

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.