我有一个关于“响应式缩略图”的问题。
我使用 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) .
您可以看到该网站的缩略图始终是响应式的。真的很棒!
请帮帮我!谢谢:)
最佳答案
您可以使用 max-width 和 width:100% 来实现，例如:
.myResponsiveThumbnail {
width:100%;
max-width:300px;
}
您可以在您的媒体查询中多次应用此方法，只需将最大宽度更改为最大宽度即可。
关于html - 如何制作响应式缩略图？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23651049/