Question

因此，我尝试使用itemImage类将图像显示在div中，但由于某种原因，它不想显示，我认为这是缩放问题，因为如果我删除图像url，然后将green放在此处。为什么要这样做，并且可以使其与其他图像一起使用？这样它们才能正确缩放？

.headSlot{
    background: url("https://vignette.wikia.nocookie.net/2007scape/images/3/35/Head_slot.png/revision/latest?cb=20130227123039");
    background-size: 100%;
    width: 45px;
    height: 45px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 25%;
}

.itemImage{
    background: url("https://vignette.wikia.nocookie.net/2007scape/images/b/b6/Adamant_full_helm.png/revision/latest?cb=20160809175941");
    width: 40px;
    height: 40px;
}

<a href="javascript:void(0)" id="trigger">
                <div class="headSlot">
                    <div class="itemImage">

                    </div>
                </div>
            </a>

Answer 1

这是诀窍

.headSlot{
    background: url("https://vignette.wikia.nocookie.net/2007scape/images/3/35/Head_slot.png/revision/latest?cb=20130227123039");
    background-size: 100%;
    width: 45px;
    height: 45px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 25%;
}

.itemImage{
    background: url(https://vignette.wikia.nocookie.net/2007scape/images/b/b6/Adamant_full_helm.png/revision/latest?cb=20160809175941);
    width: 100%;
    height: 45px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 28px;
}

<a href="javascript:void(0)" id="trigger">
                <div class="headSlot">
                    <div class="itemImage">

                    </div>
                </div>
            </a>

您需要确保background-size足够小以适合div，然后确保背景不会重复。最后，将背景图像相对于div居中。

Answer 2

将background-size: contain添加到.itemImage以使其正确缩放。本质上，它包含元素尺寸的背景图像。

编辑不仅用于显示图片，还用于正确设置格式。

.itemImage {
   background-size: contain;
   background-repeat: no-repeat;
   background-position: center;
}

为什么我的图像没有显示在另一个div中的div中？

2 个答案: