Question

我正在为此网站上的this website和style.css创建一个简单的wordpress主题。

我希望所有图片都具有响应能力。我试过这段代码。

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

不幸的是，它没有运作。如果您尝试调整浏览器的大小，则徽标和图像不会根据浏览器宽度调整大小（无响应）。

我该如何解决这个问题？

很抱歉这么天真，已经工作了2天，似乎仍然无法找到解决这个简单问题的方法。

Answer 1

而不是max-width: 100%;尝试以下内容：

img {
   max-width: 200px; /* Change this to what your logo is by its width */
   width: 100%;
   height: auto;
}

您还可以将最大宽度设置为大于徽标的实际宽度，但当然建议将其保持在高质量和可控制状态。

编辑：对于全站点图片，这当然不起作用，因为它们都没有相同的宽度。

Answer 2

对于图片标签，请写下此css

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

如果您在主题中使用bootstrap，请编写此css

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

Answer 3

您可以将图像包装在div中，并使用媒体查询进行真正的移动设备。在这里，我制作了一个三个图像的版本，并在移动设备上转换成堆叠的图像，并在此过程中调整大小：Example is here

<div class="image-wrap">
    <img alt="" src="http://test.amtamassage.org/wp-content/uploads/5904-thumb-290x220-cropped.jpg">
</div>
    <div class="image-wrap">
    <img alt="" src="http://test.amtamassage.org/wp-content/uploads/5904-thumb-290x220-cropped.jpg">
</div>
        <div class="image-wrap">
    <img alt="" src="http://test.amtamassage.org/wp-content/uploads/5904-thumb-290x220-cropped.jpg">
</div>

CSS：

.image-wrap {
      max-width: 600px;
      width: 30%;
      margin: 2% 0 0 2%;
      overflow: hidden;
      position: relative;
      display: inline;
      float: left; }
    img {
      width: 100%;
      height: auto; }
    @media only screen and (max-width: 767px) {
      .image-wrap {
        width: 96%;
        max-width: 400px;
        display: block;
        float: none;
        margin: 0 auto;
        margin-top: 2%;}
    }

徽标和全站点图像拒绝响应

3 个答案: