图像不会通过模拟 Ipad 屏幕尺寸自动修复

Question

我正在使用 wordpress 开发一个名为 littleboyauciton.com 的网站。我在 header 的右上角添加了一张图片，并添加了 css 代码：

img.sslsecure {
    max-width: 40%;
    min-height: auto;
}

这在我的电脑屏幕上显示正常。但是当我用chrome模拟ipad屏幕时，图片在header上无法显示。

我在css中添加了屏幕对应的css代码，但还是没有任何效果：

@media only screen and (max-width: 768px) {
    img.sslsecure {
    background-attachment: scroll;
    }

Answer 1

它正在做它应该做的事情，它占据了它父级宽度的 40% div。检查元素时，可以看到父级实际上几乎占据了屏幕宽度的 100%。

您可以通过为不同的屏幕尺寸添加额外的 css 来解决这个问题。这可以在您使用的主题中完成。

或者您可以添加额外的 css 并自己编写媒体查询。

参见：

编辑。

我刚刚看到您尝试添加媒体查询。您做对了，但是您必须更改元素或父元素的宽度。 background-attachment: scroll; 仅适用于带有 background-image 的元素。由于这是一个 img，它不适用于此元素。

比方说，我不希望图像宽度超过 100 像素：

@media only screen and (max-width: 768px) {
 img.sslsecure {
  max-width: 100px;
 }
}

image doesn't auto fix by simulating Ipad screen size