图像不会通过模拟 Ipad 屏幕大小自动修复

Question

我正在使用 wordpress 开发一个名为littleboyauciton.com的网站。 我在标题的右上角添加了一个图像，并添加了 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

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

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

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

看：

编辑。

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

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

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