图像未与 materialize css 卡正确对齐

Question

我正在使用 materialize 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"> 的高度。图像占用了整个 space 可用空间。

图像未与 materialize css 卡正确对齐

Image not getting aligned properly with materialize css card

html

css

materialize