Question

我正在尝试从以下网址中获取图片：

.img {
  background: url("http://ecx.images-amazon.com/images/I/21-leKb-zsL._SL500_AA300_.png") no-repeat;
  height: 60px;
  width: 60px;
  display: inline-block;
}

div {
  vertical-align: middle;
}

<div class="sm">
  <div class="img"></div>
  Facebook
</div>

我看到图像是根据给定的像素剪裁的，而我想在上面的高度和宽度（60 * 60px）内拟合整个图像

感谢任何帮助。

Answer 1

您需要调整背景大小，而不是大小。

.img {
background:url("http://ecx.images-amazon.com/images/I/21-leKb-zsL._SL500_AA300_.png")   no-repeat;
        background-size: 60px 60px;
        background-repeat: no-repeat;
        display: inline-block;
    }

Answer 2

添加背景大小和位置：

.img {
     background:url("http://ecx.images-amazon.com/images/I/21-leKb-zsL._SL500_AA300_.png")   no-repeat;
    height: 3em;
    width: 3em;
    display: inline-block;
    background-size: contain;
    background-position: 50% 50%;
}

包含使图像适合元素宽度和高度但保持其方面。位置将bg置于元素中心

Answer 3

您需要将background-size更改为100% 100%，以使其水平和垂直填充div：

.img {
     background:url("http://ecx.images-amazon.com/images/I/21-leKb-zsL._SL500_AA300_.png")   no-repeat;
    height: 3em;
    width: 3em;
    display: inline-block;
    background-size:100% 100%;
}
div {
    vertical-align: middle;
}

<div class="sm">
  <div class="img"></div>
  facebook
</div>

图像标签的背景网址属性剪裁图像

3 个答案: