桌面端居中图片横幅，移动端全屏适配问题求助

原代码问题分析 #

你之前的CSS存在两个关键错误：

• 媒体查询写法无效：@media(max-width:100%) 不符合语法规范，媒体查询的宽度值需要用像素（如768px）这类具体单位，不能用百分比100%
• CSS语法错误：样式声明位置错误（比如height: auto写在了选择器外部），且重复定义了相同的媒体查询

修正步骤 #

1. 调整HTML代码

去掉figure标签的内联max-width样式（内联样式优先级极高，会覆盖外部CSS规则），同时添加自定义类方便精准控制：

<figure class="wp-caption aligncenter banner-figure">
  <a href="www.testlink.com">
    <img alt="Gift Guide" src="123456.png">
  </a>
</figure>

2. 编写正确的CSS代码

/* 桌面端默认样式：图片容器居中，限制最大宽度 */
.banner-figure {
  max-width: 450px;
  margin: 0 auto; /* 水平居中 */
  padding: 0;
}

.banner-figure img {
  width: 100%; /* 图片自适应容器宽度 */
  height: auto; /* 保持图片原始比例 */
  display: block; /* 消除图片底部默认间隙 */
}

/* 移动端样式：容器全屏，图片填满宽度 */
@media (max-width: 767px) {
  .banner-figure {
    max-width: none; /* 取消最大宽度限制 */
    width: 100%;
    margin: 0;
  }

  .banner-figure img {
    width: 100%;
    height: auto;
  }
}

效果说明 #

• 桌面端：通过margin: 0 auto让图片容器在页面水平居中，max-width:450px限制容器宽度，图片自适应容器大小
• 移动端：以767px为断点，取消容器的最大宽度限制，让图片铺满整个屏幕宽度
• 自定义类banner-figure避免影响WordPress其他默认区块样式

内容的提问来源于stack exchange，提问作者Suzanne Pozzo