如何制作响应性缩略图？

Question

我有一个关于“反应灵敏的THUMBNAIL”的问题。

我使用Wordpress，这个(点击)是我的网站。你可以检查一下。

我的帖子缩略图看起来像这个↓

​

​

我有4个缩略图。它是300 px300‘s(正方形)。它是由这个代码↓制作的

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

您可以看到/*网格1080 and */和网格-4{宽度:300 and}。

我也用这个代码。

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

这是我的问题:

如何制作响应性缩略图？

我的缩略图只有1080 at，960px，800 at等大小。

我想使我的缩略图始终响应。任何像素，任何设备。就像这个网站(点击)。

你可以看到，该网站的缩略图总是回复。真的很棒！

请帮帮我!谢谢：)

Answer 1

您可以使用最大宽度和宽度:100%来实现这一点，例如：

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

您可以在媒体查询中多次应用此方法，只需将最大宽度更改为其最大宽度。