Переопределить изображения, получая высоту + ширину из CSS, вместо этого атрибут html

Question

Переопределить изображения, получая высоту + ширину из CSS, вместо этого атрибут html

0

У меня есть универсальный стиль, применяемый к аватарам, но в этой ситуации я хочу переопределить это, чтобы получить высоту и ширину из атрибутов html.

   <img src="http://site.com/wp-content/uploads/avatars/4/21b534c3f0db3355775089689cb4e003-bpthumb.jpg" class="avatar user-4-avatar avatar-14 photo" width="14" height="14" alt="Avatar of user">

img.avatar {
   height: 80px;
   width: 80px;
 }


.bbpress img.avatar, .forum img.avatar {
   /*what rule do I put here to make the avatar use the html attribute for sizing?*/
   height: auto;
   width: auto;
 }

Я не хочу менять какой-либо html, просто CSS... есть ли способ сделать это? Я попробовал auto, но это делает его естественной высотой и шириной.

Damon 22 окт. 2013, в 16:54

Источник

1

Пожалуйста, добавьте ваш HTML.
nkmol 22 окт. 2013, в 14:25
1

Не быть абсолютным, но я бы рекомендовал избегать атрибутов HTML, стили должны быть в вашей таблице стилей, а не в вашем семантическом HTML-документе. Кроме того, как только вы начнете применять стили CSS, они не могут быть переопределены элементами стиля HTML.
Mister Epic 22 окт. 2013, в 14:26
1

Насколько я знаю, в CSS нет средств сделать это, поскольку атрибуты width / height / border / etc в разметке всегда будут переопределяться свойствами CSS одного и того же типа. Единственный способ сделать это на самом деле - через Javascript установить стили CSS на основе значений атрибутов. stackoverflow.com/questions/9770818/...
Jason M. Batchelor 22 окт. 2013, в 14:27
0

В качестве второго шага, будьте осторожны с изменением размера изображений с помощью CSS ... браузеры, как правило, делают это плохо.
Mister Epic 22 окт. 2013, в 14:28
0

проверьте, что css / html не может понять, почему то, что сделано, не работает. Используйте инспектора, чтобы проверить, что наследуется чем. Это работает, если вы измените авто на ширину в пикселях?
matpol 22 окт. 2013, в 14:36
0

@ChrisHardie Я согласен. Я использую плагин WordPress и мне не интересно переписывать все их шаблоны;)
Damon 22 окт. 2013, в 14:58
0

@matpol Я могу установить определенную ширину пикселя, но я не хочу этого делать, если я не учел каждое изменение размера в чужом шаблоне. Хотя, как уже упоминалось, это может быть невозможно с CSS
Damon 22 окт. 2013, в 15:00
0

установите размер оболочки div и установите ширину / высоту изображения равной 100%. Это не идеально, так как изображения будут растягиваться и сдавливаться. Всегда будут предостережения о том, что вы пытаетесь сделать, хотя
matpol 24 окт. 2013, в 07:19

Показать ещё 6 комментариев

Теги:

html

css

image

height

1 ответ

Ещё вопросы

Не быть абсолютным, но я бы рекомендовал избегать атрибутов HTML, стили должны быть в вашей таблице стилей, а не в вашем семантическом HTML-документе. Кроме того, как только вы начнете применять стили CSS, они не могут быть переопределены элементами стиля HTML.
Насколько я знаю, в CSS нет средств сделать это, поскольку атрибуты width / height / border / etc в разметке всегда будут переопределяться свойствами CSS одного и того же типа. Единственный способ сделать это на самом деле - через Javascript установить стили CSS на основе значений атрибутов. stackoverflow.com/questions/9770818/...
В качестве второго шага, будьте осторожны с изменением размера изображений с помощью CSS ... браузеры, как правило, делают это плохо.
проверьте, что css / html не может понять, почему то, что сделано, не работает. Используйте инспектора, чтобы проверить, что наследуется чем. Это работает, если вы измените авто на ширину в пикселях?
@ChrisHardie Я согласен. Я использую плагин WordPress и мне не интересно переписывать все их шаблоны;)
@matpol Я могу установить определенную ширину пикселя, но я не хочу этого делать, если я не учел каждое изменение размера в чужом шаблоне. Хотя, как уже упоминалось, это может быть невозможно с CSS
установите размер оболочки div и установите ширину / высоту изображения равной 100%. Это не идеально, так как изображения будут растягиваться и сдавливаться. Всегда будут предостережения о том, что вы пытаетесь сделать, хотя

Joel Worsham · Answer 1 · 2013-10-22T13-36-00.000Z

Я не совсем уверен, что вы спрашиваете, или что вы подразумеваете, получив ширину и высоту из атрибутов html.

Единственное, что я могу поделиться, это то, что с помощью auto вы получаете начальную ширину и высоту, определенные вашим браузером

Или вы можете использовать !important после каждого атрибута css, чтобы убедиться, что он переопределяет все.

Или используя css inline со style="width:##;height:##", который переопределит листы CSS (но не!) Важные атрибуты.

Я не уверен, поможет ли это.

Я понял, что мой тег img не был закодирован должным образом, поэтому он не показывался .. отредактирован, поэтому проблема должна быть более ясной