Question

我的图片与宽度不符。图像在那里，但没有正确显示？这是我fiddle。我的问题出在第4个孩子身上。

这是我的代码：

nav li:nth-child(4){
    background: url('https://ssl.gstatic.com/gb/images/v1_76783e20.png') no-repeat -38px -664px;
    width: 12px;
    height: 12px;
    text-indent: 100%;
    opacity: .55;
}

我试过了background-size: cover，但它没有用。

Answer 1

尝试设置background-size和background-repeat：

nav li:nth-child(4){
    background: url('https://ssl.gstatic.com/gb/images/v1_76783e20.png');
    width: 12px;
    height: 12px;
    text-indent: 100%;
    opacity: .55;
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

Answer 2

将宽度/高度从12px更改为16px，将背景位置/尺寸更改为-33px -578px / 80px auto

通过将原始宽度从92px更改为80px，它会调整图像大小，并使用auto作为高度保持宽高比。

完成此操作后，需要一个新位置才能使其在div的宽度/高度内正确显示，因此-33px -578px。

Updated fiddle

nav li:nth-child(4){
    background: url('https://ssl.gstatic.com/gb/images/v1_76783e20.png') no-repeat -33px -578px / 80px auto;
    width: 16px;
    height: 16px;
    text-indent: 100%;
    opacity: .55;
}

Answer 3

尝试不同的宽度＆amp;高度：

nav li:nth-child(4){
    background: url('https://ssl.gstatic.com/gb/images/v1_76783e20.png') no-repeat -38px -664px;
    width: 16px;
    height: 22px;
    text-indent: 100%;
    opacity: .55;
}

如何调整指定宽度的图像宽度？

3 个答案: