css - 如何在 div 中(在 WordPress 上)使缩略图的宽度为 100%，而不是更大？

Question

(首先，让我说，如果我没有尝试我能想到的一切——操纵所有涉及的变量，我不会在这里问这样一个看似基本的问题。

图像在函数中加载:

add_theme_support('post-thumbnails');
add_image_size('mobile-thumb', 800, 300);

那个大小 (800,300) 是个问题。当我在手机上显示它时，它顽固地保持 800 宽。我需要 100% 的屏幕宽度。

我把它设计成

div.thumbnail-box {
width:100%;
 height: 100%;
    background-color: #EEE;
    margin-bottom:10px;
    margin-top:0px;
    margin-left:0px;
}

.the_post_thumbnail {
 max-width:100%;
}

.desktop-featured-image {
 width:100%;

}

我在内部和没有那个 div 的情况下都试过了。

我已经调整了高度和宽度。

我当前的 html 是:

<div class="thumbnail-box">
                 <img width="800" height="300" src="http://website/wp-content/uploads/2015/05/obama-e1424474715102-800x300.jpg" class="attachment-banner-image wp-post-image" alt="obama-e1424474715102" />           </div>

有谁知道如何简单地以 100% 屏幕宽度显示特色图片？

谢谢

Answer 1

这个:

img { max-width: 100%; height: auto; }

使所有图像随页面缩放，如果它们大于它们的父 div/容器/任何东西。如果您只想缩放特色图片，那么这应该可行:

.wp-post-image { max-width: 100%; height: auto; }