WordPress Ciya Shop主题弹窗图片适配及画质问题求助

核心问题分析 #

弹窗图片容器.promo-image.col-sm-6默认是16:9比例（原默认图2240×1260=16:9），新图片比例不符会导致拉伸变形；直接修改图片固定宽高会因像素压缩/拉伸损失画质。

分步解决方案 #

1. 提前处理图片

用图片编辑工具（PS/在线裁剪工具）把新图裁剪成16:9比例，分辨率建议设为1120×630——适配Retina屏，既保证高清又避免文件过大拖慢加载。

2. 修改弹窗HTML代码

删除img标签里的固定width和height属性，添加自定义类名方便样式控制：

<div class="row align-items-center">
<div class="promo-image col-sm-6">
<div class="vc_column-inner ">
<figure><img class="alignnone size-full wp-image-39396 popup-promo-img" src="你的新图片URL" alt="订阅资讯" /></figure>
</div>
</div>
<div class="promo-content col">
<div class="promo-popup-info">
<h5>Hello User</h5>
<h4 class="heading">Join Our Newsletter</h4>
Subscribe to the CiyaShop mailing list to receive updates on new arrivals, special offers and other discount information.

[pgscore_newsletter mailchimp_id="demo_test" mailchimp_api_key="demo_test"]

</div>
</div>

3. 添加自定义CSS样式

在WordPress后台「外观-自定义-额外CSS」中插入以下代码，强制图片适配容器且保持比例：

/* 弹窗图片容器控制 */
.promo-image.col-sm-6 .vc_column-inner figure {
    margin: 0;
    overflow: hidden;
    height: 100%;
}

/* 弹窗图片自适应 */
.promo-image.col-sm-6 .popup-promo-img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 按比例填充容器，裁剪多余部分，无变形 */
    object-position: center; /* 居中显示图片核心区域 */
}

补充调整 #

• 若想完整显示图片（容器两侧可能留空白），可把object-fit: cover改成object-fit: contain
• 若主题默认样式优先级更高，可在CSS属性后加!important（例：width: 100% !important;）

内容的提问来源于stack exchange，提问作者Beatriz Almeida