2

175x175 の背景画像がありますが、それを使って「CD」カバーを作ろうとしています。以下のコード ( jsFiddle が利用可能) では、サイズが変更されておらず、単に「トリミング」されていることがわかります。これを修正するにはどうすればよいですか?

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;
}
4

3 に答える 3

6

background-size CSS プロパティを使用します。

background-size: 75px 75px;

または:

background-size: 100% 100%;

また、簡略化されたbackgroundプロパティもあります。

background: url('http://userserve-ak.last.fm/serve/126/23679395.jpg') 100% 100%;
于 2012-06-12T05:58:25.053 に答える
2

次のように background-size を使用します。

.cd {
    -moz-border-radius: 63px;
    -webkit-border-radius: 63px;
    border-radius: 63px;
    background-image: url('http://userserve-ak.last.fm/serve/126/23679395.jpg');
    background-size: 75px;
    width: 75px;
    height: 75px;
    position: relative;
    border:1px solid #A1A1A1;
}

例: http://jsfiddle.net/5CDnw/6/

于 2012-06-12T05:59:29.117 に答える
1

background-size:cover を使用すると、コンテナーのサイズが何であれ、コンテナーがいっぱいになります。

.cd {
    -moz-border-radius: 63px;
    -webkit-border-radius: 63px;
    border-radius: 63px;
    background-image: url('http://userserve-ak.last.fm/serve/126/23679395.jpg');
    background-size:cover;/*Add This*/
    -webkit-background-size: cover;/*Add This for webkit*/
    -moz-background-size: cover;/*Add This for mozilla*/
    -o-background-size: cover;/*Add This for opera*/
    width: 75px;
    height: 75px;
    position: relative;
    border:1px solid #A1A1A1;
}
于 2012-06-12T06:05:58.160 に答える