如何制作响应式缩略图？

Question

我有一个关于“响应大拇指”的问题。

我使用Wordpress，此(click)是我的网站。你可以查一下。

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

我有4个缩略图。它是300px 300px（平方）。它是由这个代码↓

制作的

/* =============================================================================
   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，960px，800px等处调整大小

我想让我的缩略图始终响应。在任何像素中，任何设备。喜欢这个网站(click)。

您可以看到该网站的缩略图总是具有代表性。真的很棒！

请帮帮我！感谢：）

Answer 1

您可以使用最大宽度和宽度实现此目的：100％，例如：

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

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