How to make responsive thumbnail?

Question

I have a question about "RESPONSIVE THUMBNAIL".

I use Wordpress and this (click) is my site. You can check it.

My Posts thumbnail is look like this ↓

I have 4 thumbnail. It's 300px 300px (square). And It's made by this code ↓

/* =============================================================================
   LAYOUT
   ========================================================================== */
.wrapper {margin:0 auto}

.grids{margin-left:-30px}
[class*="grid-"]{display:inline;float:left;margin-left:30px}
.grid-12{margin-right:0}

/* Grid 1080px */
.wrapper{width:100%}
.grid-1{width:60px}.grid-2{width:150px}.grid-3{width:240px}.grid-4{width:300px}.grid-5{width:420px}.grid-6{width:510px}.grid-7{width:600px}.grid-8{width:690px}.grid-9{width:780px}.grid-10{width:870px}.grid-11{width:960px}.grid-12{width:1030px}

/* Grid 960px (mediaqueries) */
@media only screen and (min-width: 960px) and (max-width: 1199px) {
.wrapper{width:100%}
.grid-1{width:50px}.grid-2{width:130px}.grid-3{width:210px}.grid-4{width:290px}.grid-5{width:370px}.grid-6{width:450px}.grid-7{width:530px}.grid-8{width:610px}.grid-9{width:690px}.grid-10{width:770px}.grid-11{width:850px}.grid-12{width:910px}
}

/* Grid 800px (mediaqueries) */
@media only screen and (min-width: 801px) and (max-width: 959px) {
.wrapper{width:100%}
.grids{margin-left:-20px}
[class*="grid-"]{margin-left:20px}
.grid-1{width:40px}.grid-2{width:100px}.grid-3{width:160px}.grid-4{width:220px}.grid-5{width:280px}.grid-6{width:340px}.grid-7{width:400px}.grid-8{width:460px}.grid-9{width:520px}.grid-10{width:580px}.grid-11{width:640px}.grid-12{width:680px}
}

/* Grid lt 800px / Mobile (mediaqueries) */
@media only screen and (max-width: 800px) {
.wrapper{width:100%}
.grids,
[class*="grid-"]{width:100%;margin-left:0;margin-right:0}
html{font-size:1.125em /* Make text slightly larger for smaller devices to improve readability. */}
body{-webkit-text-size-adjust:none}
}

You can see /* Grid 1080px */ and grid-4{width:300px}.

And I use this code too.

if ( has_post_thumbnail() ) {
    $image_src = wp_get_attachment_image_src( get_post_thumbnail_id(),’thumbnail’ );
     echo '<img width="100%" src="' . $image_src[0] . '">';
}
?>

This is my question :

How to make responsive thumbnail?

My thumbnail is resize only at 1080px, 960px, 800px, etc.

I would like to make my thumbnail always responsive. In any pixel, any device. Like this site (click).

You can see that site's thumbnail is always reponsive. It's really great!

Please help me! Thanks:)

Answer 1

You can achieve this with max-width and width:100%, for example:

.myResponsiveThumbnail {
    width:100%;
    max-width:300px;
}

You can apply this a several times in your media queries, and just change the max-width to whatever width it can be on his max.