Question

所以我正在尝试使用def update_item_type(request, id=None): instance = get_object_or_404(ItemType, id=id) context = { 'instance': instance } return render(request, 'inventory/inventory_maintenance.html', context)，但css似乎已被忽略（似乎处于自动模式）

第二张图片是我想要的样子（或至少具有它的功能）。

HTML

object-fit

SCSS

<section
    style="background-image: url('https://via.placeholder.com/400x1000/d3d3d3/000000/?text=No%20Image&')"
    class="image"
>
    <img src="https://via.placeholder.com/400x1000/d3d3d3/000000/?text=No%20Image&">
</section>

<br><br><br>

<section
    style="background-image: url('https://via.placeholder.com/400x1000/d3d3d3/000000/?text=No%20Image&')"
    class="image contain"
>
    <img
        src="https://via.placeholder.com/400x1000/d3d3d3/000000/?text=No%20Image&"
        style="visibility: hidden;"
    >
</section>

这是小提琴

https://jsfiddle.net/whb7qLku/2/

Answer 1

由于图像处于纵向模式，因此您需要限制图像的高度以使其正常工作。

设置img { max-height: 100%; max-width: 100%;}或img { height: 100%; width: 100%;}

对象拟合未按预期执行

1 个答案: