图像未与物化 css 卡正确对齐

Question

我正在使用物化 css 将图像放置在卡片中

但图像似乎被削减了一半

<div class="card teal lighten-3 large hoverable">
    <div class="card-image">
        <img id="axolotl-api-picture" style="background-size: 100% 100%;" alt="cute axolotl">
    </div>
    <div class="card-action teal">
        <a class="prev axolotl-api-picture">Previous</a>
        <a class="next axolotl-api-picture">Next</a>
    </div>
</div>

当前图片： img

原始图像（即我想要的）： img

所以你看到图像没有完全显示

Answer 1

试试这个：

style="background-size: cover;"

另外我认为您需要更改此 div <div class="card-image"> 的高度。图像占用了它可用的整个空间。