嘿，我来帮你搞定这个图片显示的麻烦！你的问题主要出在两个地方：模板里的变量名写错导致宽高属性没生效，还有原生的width/height是固定尺寸，没法让图片在小屏幕上自动缩放。咱们一步步来解决：

1. 先修复模板里的变量错误 #

你在循环图片的时候，循环变量明明是image，但却用了asset.getUrl('img')这种写法，这会导致图片的URL和宽高都没正确获取到！把所有asset改成image就行：

{% set myAssetQuery = craft.assets() %}
{% set images = myAssetQuery.all() %}
<ul>
{% for image in images %}
<li>
  <img 
    src="{{ image.getUrl('img') }}" 
    width="{{ image.getWidth('img') }}" 
    height="{{ image.getHeight('img') }}"
    alt="{{ image.title }}" <!-- 别忘了加alt属性，提升页面可访问性 -->
  >
</li>
{% endfor %}
</ul>

{% for entry in craft.entries.section('secscrpt') %}
{% for block in entry.matriz %}
{{ block.body }}
{% endfor %}
{% endfor %}

2. 添加CSS让图片实现响应式 #

原生的width/height属性是固定值，不会随屏幕尺寸变化，所以必须用CSS来控制图片的自适应行为。给图片加一个类，然后写下面的样式：

/* 核心响应式图片样式 */
.blog-image {
  max-width: 100%; /* 图片最大宽度不超过父容器的宽度 */
  height: auto; /* 自动保持宽高比，避免图片拉伸变形 */
  display: block; /* 移除图片默认的行内元素底部留白 */
}

/* 可选：给列表去掉默认样式，让布局更整洁 */
.blog-images-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

然后把模板里的img标签加上这个类：

<img 
  src="{{ image.getUrl('img') }}" 
  width="{{ image.getWidth('img') }}" 
  height="{{ image.getHeight('img') }}"
  alt="{{ image.title }}"
  class="blog-image"
>

3. 额外优化：用Craft图片变换提升性能 #

如果你还没在Craft后台设置图片变换（Image Transforms），建议预设一个合适的变换尺寸（比如最大宽度1200px），这样生成的图片不会过大，加载速度更快。调用的时候直接用变换名称：

<img 
  src="{{ image.getUrl('yourTransformName') }}" 
  width="{{ image.getWidth('yourTransformName') }}" 
  height="{{ image.getHeight('yourTransformName') }}"
  alt="{{ image.title }}"
  class="blog-image"
>

这样修改后，图片既能正确渲染宽高，又能在响应式场景下自动缩小，不会再占满整个屏幕啦～

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