CSS list-style-image 尺寸

問題描述

我試圖在<ul> 的列表專案中設定帶有 CSS 的自定義 SVG 圖示。例：

<ul>
    <li style="list-style-image: url('first.svg')">This is my first item</li>
    <li style="list-style-image: url('second.svg')">And here's my second</li>
</ul>

問題是影像太大，並且拉伸線的高度。我不想更改影像大小，因為使用 SVG 的點是以解析度縮放。有沒有辦法使用 CSS 設定影像的大小，沒有某種 background-image 駭客？

編輯：這是一個預覽 (大影像故意選擇插圖和戲劇)：http://jsfiddle.net/tWQ65/4/和我目前的 background-image 解決方法，使用 CSS3 的 background-size：http://jsfiddle.net/kP375/1/

最佳解決方案

您可能想嘗試使用 img 標籤，而不是設定’list-style-image’ 屬性。使用 CSS 設定寬度和高度實際上會裁剪影像。但是，如果使用 img 標籤，則影像將以寬度和高度為單位進行 re-sized 。

次佳解決方案

我會用：

li{
   list-style: none;
}
li:before{
   content: '';
   display: inline-block;
   height: y;
   width: x;
   background-image: url();
}

第三種解決方案

您可以看到佈局引擎如何確定 list-image 的尺寸：http://www.w3.org/wiki/CSS/Properties/list-style-image

有三種方法來解決這個問題，同時保持 CSS 的好處：

1. 調整影像大小

2. 使用 background-image 和填充 (最簡單的方法) 。

3. 使用 viewBox 使用沒有定義大小的 SVG，當用作 list-style-image(對 Jeremy)) 時，將重新調整為 1em 。

第四種方案

幾乎像作弊一樣，我剛進入一個影像編輯器，並將影像大小調整一半。像我一樣的魅力。

第五種方案

我在用著：

li {
	margin: 0;
	padding: 36px 0 36px 84px;
	list-style: none;
	background-image: url("../../images/checked_red.svg");
	background-repeat: no-repeat;
	background-position: left center;
	background-size: 40px;
}

其中 background-size 設定背景影像大小。

參考文獻

• CSS list-style-image size

注：本文內容整合自 Google/Baidu/Bing 輔助翻譯的英文資料結果。如果您對結果不滿意，可以加入我們改善翻譯效果：薇曉朵技術論壇。