如何通过CSS调整WordPress模板中电影海报大小且避免拉伸？

嘿，我看你已经成功把WordPress里的电影海报调大了，但遇到了拉伸变形的麻烦——这是因为你给图片硬设了固定的height: 450px，而海报本身的宽高比和这个强制高度不匹配，就被硬生生拉变形了。下面给你几个靠谱的解决方案，按需选就行：

方案1：用object-fit轻松保持比例（首推） #

这是CSS里专门解决图片容器适配的属性，能让图片在指定的宽高里保持原有比例，不会变形。直接修改你现有的CSS代码就行：

.loop-container article img.attachment-post-thumbnail {
    width: 100%;
    height: 450px;
    /* 关键属性：保持比例并填满容器，超出部分裁剪 */
    object-fit: cover;
    /* 要是你想完整显示整张海报，不想裁剪，就换成下面这个，但容器可能会留空白 */
    /* object-fit: contain; */
    -webkit-transition: opacity 0.175s ease-in-out;
    -moz-transition: opacity 0.175s ease-in-out;
    -o-transition: opacity 0.175s ease-in-out;
    transition: opacity 0.175s ease-in-out;
}

• cover模式：海报会按比例缩放，刚好填满450px高的容器，超出的部分会被裁掉，视觉上很规整，适合电影海报展示；
• contain模式：整张海报完整显示，保持原始比例，容器没被填满的地方会留空白，适合需要完整看到海报细节的场景。

方案2：用容器比例控制，适配响应式布局 #

要是你不想固定死高度，而是想让海报始终保持统一的宽高比（比如电影海报常见的2:3比例），可以给海报的父容器设置比例，让图片自适应填充：

1. 先给图片的父元素（比如你的article标签）加样式：

.loop-container article {
    /* 以2:3比例为例，padding-top的计算方式是 (高度/宽度)*100% = 3/2*100% = 150% */
    padding-top: 150%;
    position: relative;
    overflow: hidden;
}

2. 再修改图片的样式：

.loop-container article img.attachment-post-thumbnail {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* 同样可以换成contain，看你需求 */
    -webkit-transition: opacity 0.175s ease-in-out;
    -moz-transition: opacity 0.175s ease-in-out;
    -o-transition: opacity 0.175s ease-in-out;
    transition: opacity 0.175s ease-in-out;
}

这种方式的好处是，不管页面宽度怎么变（比如手机端、平板端），海报都能保持完美的比例，不会变形，适合做响应式的电影列表。

方案3：提前统一图片尺寸（备选） #

要是你觉得CSS设置太麻烦，也可以在上传海报到WordPress媒体库的时候，手动把所有海报裁剪成统一的宽高（比如300px×450px），这样直接设置固定宽高也不会变形。不过这种方式比较费时间，不如前两种CSS方案灵活。

内容的提问来源于stack exchange，提问作者西奥多