时间戳

首页 > 解决方案 > 图像不会通过模拟 Ipad 屏幕尺寸自动修复

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

问题描述

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

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

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

普通的

平板电脑

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

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

标签： htmlcssioswordpressipad

解决方案

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

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

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

看：

https://www.w3schools.com/css/css_rwd_mediaqueries.asp

编辑。

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

比方说，我不希望图像宽于 100px：

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

推荐阅读