1. ホーム
  2. html

[解決済み] CSS list-style-imageのサイズ

2022-03-02 03:04:45

質問

カスタムSVGアイコンをCSSで設定したい。 <ul> のリストアイテムです。例

<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 ハックするのですか?

EDIT: ここにプレビューがあります(大きな画像はイラストとドラマのために意図的に選ばれています)。 http://jsfiddle.net/tWQ65/4/
そして、私の現在の background-image を使用した回避策です。 background-size : http://jsfiddle.net/kP375/1/

解決方法は?

list-style-imageプロパティを設定する代わりに、imgタグを使用することをお勧めします。cssでwidthとheightを設定すると、実際に画像が切り取られます。しかし、imgタグを使用すると、画像はwidthとheightの値に合わせてリサイズされます。