如何製作響應式縮略圖？

Question

我有一個關於「RESPONSIVE THUMBNAIL」的問題。

我使用WordPress的，這個(click)是我的網站。你可以檢查它。

我的帖子縮略圖是這個樣子↓

我有4個縮略圖。它是300px 300px（square）。它由此代碼製作↓

/* ============================================================================= 
    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} 
} 

您可以看到/ * Grid 1080px * /和grid-4 {width：300px}。

我也使用這個代碼。

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

這是我的問題：

如何使響應縮略圖？

我的縮略圖調整隻在1080px，960像素，800像素等

我想提出我的縮略圖總是有求必應。在任何像素中，任何設備。喜歡這個網站(click)。

您可以看到該網站的縮略圖始終處於響應狀態。這真的太棒了！

請幫幫我！謝謝:)

Answer 1

你可以用最大寬度和寬度實現這一目標：100％，例如：

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

您可以在媒體查詢應用此一幾次，只是改變最大寬度不管它的最大寬度如何。