我有一张175x175的背景图片,但我想用它做一个“CD”封面。在下面的代码(jsFiddle available)中,您将看到它没有调整大小,而只是“裁剪”。我该怎么解决?
HTML格式:

<div class="cd"><div class="hole"></div></div>
<p>I want the image above to be resized to 75x75... but it's not</p>

<img src="http://userserve-ak.last.fm/serve/126/23679395.jpg" alt="Test" />
<p>Actual image size above.</p>

CSS:
.cd {
    -moz-border-radius: 63px;
    -webkit-border-radius: 63px;
    border-radius: 63px;
    background-image: url('http://userserve-ak.last.fm/serve/126/23679395.jpg');
    width: 75px;
    height: 75px;
    position: relative;
    border:1px solid #A1A1A1;
}
.cd .hole {
    width: 20px;
    height: 20px;
    position: absolute;
    background-color: #ddd;
    border:1px solid #A1A1A1;
    left: 28px;
    top: 28px;
    -moz-border-radius: 15px;
    -webkit-border-radius: 15px;
    border-radius: 15px;
}

最佳答案

使用background-sizeCSS属性:

background-size: 75px 75px;

或者:
background-size: 100% 100%;

还有速记background属性:
background: url('http://userserve-ak.last.fm/serve/126/23679395.jpg') 100% 100%;

关于html - 通过CSS调整背景图片的大小,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/10991216/

10-10 00:50
查看更多