Изображения без width/height

[Neofant]

Чтобы увидеть картинку в 3Кб, пришлось загрузить страницу в 192Кб.

[extonec]

Вероятно вы ошиблись:
<img src=«img/anyname.png» width=«100%» height=«100» style=«max-width:500px !important»>

[extonec]

Использовать или нет, это другой разговор, без !important тоже работает, просто поправил вас, чтобы остальные не заблуждались

[extonec]

Вы попробуйте сами, style или через подключенный файл стилей, с !important или без, в IE7 или google chrome 13.
max-width работает

[HDg]

Отлично работает в Хроме, хз что Вам не нравится
jsfiddle.net/FdcuR/49/

[HDg]

Объясните, пожалуйста

[Fesor]

Вы неправы, max-width и max-height а так же их собраты min-* прекрасно работают с картинками у которых фиксированные размеры. Другой вопрос что при этом (в частности ваш пример) пропорции не саблюдаются так как вычесленный размер картинки не совпадает с заданной шириной, а вот про высоту ничего в стилях сказано небыло так оно и осталась как задавалось.

Не вижу смысла жестко задавать размеры картинки. Иногда да, но доводить до крайностей…

[Fesor]

последний год я вообще не использую явное указание размера картинок, так что с этой проблемой я не сталкивался. А ежели размеры будут фиксированными у изображений, то да, в ресете это лучше не делать. Все должно иметь смысл. max-width для картинки с фиксированной шириной как по мне не имеет особо смысла…

[aps]

> Честно говоря я вообще слабо понимаю для чего нужно нынче картинкам
затем же, зачем и 10-15 лет назад. Картинки загружаются не мгновенно, и скачки верстки заметны даже на быстрых линиях.

[Suor]

Угу, и картину растянет в ширину непропорционально

[rushman]

А чего border а не outline?

[ozoned]

Тоже мне открытие…
Кстати селектор не сработает если указать только один из атрибутов (width|height), а картинка будет «разваливать» страницу.

[ozoned]

И при пустых атрибутах не сработает, кривой снипет в общем.
Можно попробовать так:

img:not([width]), img:not([height]), img[width=""], img[height=""] {
border: 2px solid red !important;
}

[ozoned]

Repetitio est mater studiorum

[ozoned]

И при пустых атрибутах не сработает, кривой в общем сниппет.

Можно попробовать так:

img:not([width]), img:not([height]), img[width=""], img[height=""] {
border: 2px solid red !important;
}

Уверен что еще что-то пропустил :)

[atipugin]

Да, согласен, ваш вариант получше

[homm]

> Кстати селектор не сработает если указать только один из атрибутов (width|height)
А должен? Указание одного атрибута означает пропорциональное изменение размера.

[ozoned]

Верно, но для чего сниппет?
«Часто такие картинки, если мы не укажем их размеры, могут во время загрузки раскачивать нашу верстку»
А пока картинка не загружена браузер не «узнает» ее пропорции?

[0mm]

То есть вы хотите сказать, что нужно нагрузить сервер, вместо того, чтобы нагрузить голову менеджера, который, я могу поспорить, большую часть своего рабочего времени гоняет балду.

Менеджер, как минимум, должен проверить то, что он опубликовал. Я думаю, что в три часа ночи F5 нажимается немногих сложнее, нежели в любое другое время

[f0rmat1k]

На самом деле, вы оба не правы)
Все визивиг-редакторы итак проставляют сейчас ширину и высоту и не надо напрягать ни сервер, ни менеджеров.
А на этапе верстки картинкам, которые не предполагается менять, неплохо бы прсотавить ширину и высоту, чтоб не скакала верстка при загрузке старницы.

[0mm]

Таки мы несколько правы, хотя бы по той причине, что далеко не все работают через визуальные редакторы. Да и редакторы бывают разные. Конечно, это частные случаи, но проблема, вроде как, обсуждается глобально

[f0rmat1k]

> Чтобы во время разработки было более наглядно, где мы пропустили картинки без указания размеров

Именно на этапе верстки. Наполнение не есть верстка, и разумеется, предполагается, что верстальщик не забудет после завершения верстки убрать этот сниппет.

Ну и как я говорил ВСЕ известные редакторы проставляют ширину и высоту загружаемым картинкам. Если я не прав, покажите какой не проставляет, только известный, а не тот, которым пользуются 3.5 человека.

[atipugin]

да бог с вами, какой продакшен, это всего лишь один из способов дебага.

[S2nek]

Когда-то давно написал небольшую заметку про "диагностические стили". Может кому-нибудь окажется полезным.

[MechanisM]

спасибо. полезно.

[vinogradovser]

Спасибо, теперь долой JS для этой задачи

[Serator]

По мимо перечисленного предложенный снипет ошибочно сработает на изображениях, у которых ширина и высота через CSS задана. В общем автор как-то не подготовился :(.

[MechanisM]

давно уже не указываю размер картинок в тэге картинки. всегда все в CSS.