[解決済み] 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の値に合わせてリサイズされます。
関連
-
[解決済み】このインラインブロックのdiv要素の間に説明のつかない隙間があるのはなぜですか?[重複]
-
[解決済み] 順序なしリストが div 内で左いっぱいに整列されない
-
[解決済み] CSSの親セレクタはありますか?
-
[解決済み] CSSでcellpaddingとcellspacingを設定する?
-
[解決済み] 箇条書きのない順序なしリストが必要です。
-
[解決済み] CSSでテキストや画像の背景を透明にするには?
-
[解決済み] How do I style a <select> dropdown with only CSS?
-
[解決済み] CSS画像を背景で伸縮させる - CSSのみで可能
-
[解決済み] CSSファイルで相対URLを使用していますが、どの位置からの相対位置なのでしょうか?
-
[解決済み】HTML5入力のプレースホルダの色をCSSで変更する。
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み】iframeを水平方向にセンタリングする方法は?
-
[解決済み】html文書に縦の空白を挿入するには?
-
[解決済み】iframeの高さを100%にする方法【重複】。
-
[解決済み] フレックスアイテムを右にフロートさせる
-
[解決済み] div に斜めのエッジを作成する [重複] 。
-
[解決済み] SRCとHREFの違い
-
[解決済み] WebForms UnobtrusiveValidationMode には、'jquery' の ScriptResourceMapping が必要です。jquery という名前の ScriptResourceMapping を追加してください(大文字と小文字を区別します)。
-
[解決済み] 送信ボタンが機能しない
-
[解決済み] 電話番号のマークアップはどのように行うのですか?
-
[解決済み] head」タグと「header」タグの本当の違いは何ですか?[重複】について]