求助：固定Astro Screwfast主题FeaturesNavs组件图片比例

数据老陈

2026-6-21

解决Screwfast主题中FeaturesNavs组件图片比例响应式变化的问题

排查方向与修复步骤

清理响应式Tailwind比例类
检查FeaturesNavs.astro和TabContent.astro中图片容器或<img>标签的Tailwind类，找到类似lg:aspect-[16/9]或max-w-[1178px]:aspect-[16/9]这类响应式比例控制类，直接删除响应式前缀，保留固定比例的类。比如原本的：
```
<div class="aspect-[9/16] lg:aspect-[16/9] overflow-hidden">
  <img src="/path/to/image.jpg" class="object-cover" alt="Feature" />
</div>
```
修改为：
```
<div class="aspect-[9/16] overflow-hidden">
  <img src="/path/to/image.jpg" class="object-cover" alt="Feature" />
</div>
```
移除条件渲染的多比例图片逻辑
查看组件中是否存在根据屏幕尺寸切换图片资源的代码（比如通过Astro.props或JS判断视口宽度），例如：
```
{
  Astro.clientWindow.innerWidth < 1178 ? (
    <img src="/image-16-9.jpg" alt="Feature" />
  ) : (
    <img src="/image-9-16.jpg" alt="Feature" />
  )
}
```
直接替换为固定使用竖版（9:16）的图片资源，删除条件判断逻辑。
删除CSS媒体查询中的比例修改
检查组件内的<style>标签或全局CSS文件，找到针对max-width: 1178px的媒体查询规则：
```
@media (max-width: 1178px) {
  .features-nav-image {
    aspect-ratio: 16/9;
  }
}
```
删除该媒体查询块，或者强制设置固定比例覆盖：
```
.features-nav-image {
  aspect-ratio: 9/16 !important;
}
```
统一Astro Picture组件的资源
如果使用了Astro的<Picture>组件实现响应式图片，检查是否包含针对小屏的<source>标签（比如指定media="(max-width: 1178px)"并引用横版图片），删除这些多余的<source>，只保留对应9:16比例的图片资源。