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; }

Answer 2

因为你的字面意思是你的图像是宽度的100％。你的最终目标是什么？将宽度调整为屏幕宽度，但高度保持不变？

我做了一些简短的例子，我认为这些例子会指出你正确的方向;

<h2>flex</h2>
<div style="width: 360px; height: 400px; border: 1px solid blue;">
  <div class="thumbnail-box" style="display: flex;">
    <img class="the_post_thumbnail" src="http://placehold.it/800x300" />           
  </div>
</div>

<h2>cover</h2>
<div style="width: 360px; height: 400px; border: 1px solid blue; background-image: url(http://placehold.it/800x300); background-size:cover; background-position: center center;">
</div>

<h2>contain</h2>
<div style="width: 360px; height: 400px; border: 1px solid blue; background-image: url(http://placehold.it/800x300); background-size:contain; background-position: center center;">
</div>

http://plnkr.co/edit/RBVmzVUJFOYl8yXNsy5J?p=preview

我建议查找媒体查询和css flexbox以获得进一步的解释。

如何在div（在WordPress上）内制作缩放图像100％宽度，而不是更大？

2 个答案: