Как задать размер изображения в тэге?

Question

[Edward]

Т.к я только учусь верстке возник вопрос. Как задать размер изображение <ul> В файл с стилями добавил отдельный класс и строчку list-style-image. Но так получилось что размер изображения большой. Как изменить в css это?

Comments

[Сергей delphinpro]

По-моему, никак. Эта хрень не стилизуется, рисуется картинка которую задал как есть.
Более управляемый вариант - делать буллеты псевдоэлементами у LI-шек

[Ankhena]

Разве что font-size, а содержимое li складывать в span и ему отдельный размер.
Но это, мягко говоря, странная затея.
Лучше картинки или before

[Ankhena]

Если уже ваше изображение, то изначально задать ему нужный размер.

[Дима]

все очень просто!

ul.counter {
font-size: 55px; /* грубость текста */
list-style: none; /* уберает стандартные маркеры */
}

ul.counter li:before {
content: ''; /* для отображения контента в данном солучаи - background: url(./imeg/jVfPr0P4gm0.jpg); */
display: inline-block; /* тоже необходим для отображения нашего изображения */
width: 150px;
height: 150px;
background: url(./imeg/jVfPr0P4gm0.jpg); /* путь к нашему изображению */
background-size: contain; /* для отображения изображения в указанных нами размерами width: 150px; height: 150px; */
}

Answer 1

[Edward]

Т.к нету никаких способов, лучшим способом оказалось смена размера картинки

Comments

[Дима]

я в шоке что нет ни одного нормального ответа...
вот как решается подобная ситуация

ul.counter {
font-size: 55px; /* грубость текста */
list-style: none; /* уберает стандартные маркеры */
}

ul.counter li:before {
content: ''; /* для отображения контента в данном солучаи - background: url(./imeg/jVfPr0P4gm0.jpg); */
display: inline-block; /* тоже необходим для отображения нашего изображения */
width: 150px;
height: 150px;
background: url(./imeg/jVfPr0P4gm0.jpg); /* путь к нашему изображению */
background-size: contain; /* для отображения изображения в указанных нами размерами width: 150px; height: 150px; */
}

Answer 2

[Дима]

вот как решается подобная ситуация

ul.counter {
font-size: 55px; /* грубость текста */
list-style: none; /* уберает стандартные маркеры */
}

ul.counter li:before {
content: ''; /* для отображения контента в данном солучаи - background: url(./imeg/jVfPr0P4gm0.jpg); */
display: inline-block; /* тоже необходим для отображения нашего изображения */
width: 150px;
height: 150px;
background: url(./imeg/jVfPr0P4gm0.jpg); /* путь к нашему изображению */
background-size: contain; /* для отображения изображения в указанных нами размерами width: 150px; height: 150px; */
}

Answer 3

[sgrinko]

думаю что нет такой возможности
я бы вообще убрал бы list-style
и сделал все на li и выставлял через background-size background-image:

Answer 4

[lovellylomenso]

https://youtu.be/7gjxE_VEA_4?t=2668
Я тебе привязал по времени.Там парень вставляет логотип.Я думаю это то что тебе нужно.