WordPress站点模拟iPad屏幕尺寸时头部图片无法自适应显示问题

问题根源 #

• 你写的媒体查询代码完全不生效：background-attachment是CSS背景图的专属属性，对你插入的<img>标签元素没有任何作用，且当前媒体查询代码缺少闭合大括号，语法错误本身也会导致规则不执行。
• 原有图片CSS适配逻辑存在缺陷：max-width:40%是相对于父元素宽度的比例，头部右上角的父容器在iPad尺寸下宽度收窄，40%的比例可能导致图片挤压或溢出；min-height: auto的写法没有实际意义，反而可能干扰高度自适应逻辑。

调整方案 #

1. 替换原有所有和img.sslsecure相关的CSS代码，改为如下内容：

/* 桌面端默认样式 */
img.sslsecure {
    display: inline-block;
    max-width: 40%;
    width: auto;
    height: auto; /* 保证图片等比缩放不会变形 */
    object-fit: contain; /* 避免图片被强制拉伸 */
}

/* 适配iPad及以下尺寸，768px对应iPad竖屏宽度 */
@media only screen and (max-width: 768px) {
    img.sslsecure {
        max-width: 25%; /* 可根据实际显示效果在20%-30%区间微调 */
    }
}

2. 检查WordPress主题的头部是否配置了正确的viewport元标签，若不存在则在主题header.php文件的<head>标签内添加如下代码，这是移动端适配的基础前提：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

3. 若调整后仍有显示异常，排查头部右上角父容器的CSS规则：确认父元素在iPad尺寸下没有设置overflow:hidden或者不合理的固定宽高限制图片显示，按需调整父容器的内边距或宽度即可。

内容的提问来源于stack exchange，提问作者Tim Darius