Обнаружил странное, не могу понять. Ограничиваю максимальный размер картинки так:
Если верстать блоками, все работает (большие картинки подгоняются под размер блока). Если вставить такое изображение в таблицу, не все браузеры ужимают картинку до нужного размера. Что происходит и что я делаю не так?
Что происходит и что я делаю не так? Скорее всего, ячейка не воспринимается как родительский элемент, к размерам которого должна подгоняться картинка. Просто заверни её дополнительно в
Скорее всего, ячейка не воспринимается как родительский элемент, к размерам которого должна подгоняться картинка. Просто заверни её дополнительно в div style="max-width:100%;"<img src="ссылка" width="100%" Но тогда маленькие картинки растягиваются, плохо смотрится.
Но тогда маленькие картинки растягиваются, плохо смотрится. Анон, я что-то тебя не понял. Тебе надо, чтобы картинки растягивались, но не нравится, что они растягиваются? Так, что ли?
Ну и, если не хочешь, чтобы растягивались маленькие картинки — просто не приписывай им атрибут style="max-width:100%. В чём проблема-то?
Скорее всего, ячейка не воспринимается как родительский элемент, к размерам которого должна подгоняться картинка. Просто заверни её дополнительно в div style="max-width:100%;" Пробовал, все равно не работает. Работает такая конструкция:
Но тогда маленькие картинки растягиваются, плохо смотрится.
Анон, я что-то тебя не понял. Тебе надо, чтобы картинки растягивались, но не нравится, что они растягиваются? Так, что ли? Мне нужно, чтобы большие ужимались, а маленькие не растягивались. Для этого и задается ограничение максимального размера, то есть отображаемая картинка может быть меньше, но не может быть больше указанного размера. Все отлично работает, если верстка блочная. Если картинка внутри таблицы - не работает. Если указать просто размер как html-атрибут - ячейка таблицы воспринимается как родительский элемент, картинка подгоняется (но тогда маленькие картинки растягиваются). Если указать максимальный размер через css, то внутри таблицы такая конструкция работает не во всех браузерах (у меня не работает в ФФ). Так понятно?
картинка подгоняется (но тогда маленькие картинки растягиваются)
Повторяю своё предложение. Попробуй просто не приписывать маленьким картинкам атрибут style="max-width:100%;". Или сразу задавай значение атрибута для них не в процентах, а в px.
Попробуй просто не приписывать маленьким картинкам атрибут style="max-width:100%;". Так они же, картинки, для одних мониторов большие, для других маленькие! Мониторы же разные. Что на 27" маленькое, то на смартфоне большое. Или сразу задавай значение атрибута для них не в процентах, а в px. А какая разница, в чем задавать, если браузер не воспринимает атрибут? Хоть в попугаях же. И как можно задать относительную ширину в пикселях, это ж верстка перестанет быть резиновой.
Я выкрутился, вынув картинки из таблицы. Получилось более громоздко, зато работает. Но хотелось бы понять, почему так происходит и есть ли "правильное" решение задачи.
Кстати, большое спасибо всем от анона с отступами. В итоге все же решил проблему закрывающимися абзацами, а чтобы отступы не были такими гигансткими, юзал вот этот вариант:
Так они же, картинки, для одних мониторов большие, для других маленькие! Мониторы же разные. Что на 27" маленькое, то на смартфоне большое. Добро пожаловать в интернет, родной. Правда, боюсь, с этим открытием ты опоздал — лет так на несколько. В html есть несколько костылей, решающих эту проблему (вроде тега style — подчёркиваю, тега, а не атрибута), вот только дайрики их, насколько мне известно, не поддерживают. Выход, в принципе, есть — и свой взгляд на этот вопрос я изложу чуть ниже.
А какая разница, в чем задавать, если браузер не воспринимает атрибут? Если у тебя браузер вдруг перестал воспринимать атрибут style — значит, ты пишешь его неправильно. Потому что все современные браузеры (даже осёл последних версий) адекватно его переваривают, если он правильно задан. Кроме того, огнелис, на мой взгляд, один из наиболее логичных браузеров, и он будет делать не то, что ты хочешь, а то, что ты сказал ему делать. И если ты говоришь растягивать картинку до максимальной допустимой ширины (то самое style="max-width: 100%;")— он будет делать это всегда, потому что он должен так делать.
И как можно задать относительную ширину в пикселях, это ж верстка перестанет быть резиновой. Даже у резины всегда есть минимально допустимое значение ширины. Всегда. Тут немного почти оффтопа на тему, почему нужно брать определённые значения в pxДля дайриков я считаю таковым 570px — это приблизительная ширина поля для текста/комментария за вычетом отступов и места под аватар при стандартном дизайне блога и разрешении монитора 1024×768px (это всё ещё второе по популярности разрешение у использующих дайры — вот тебе статистика сообщества выкладки этой ФБ, убедись сам). Соответственно, нет смысла совать в оформление элементы, у которых жёстко задана ширина, превышающая это значение, потому что они сломают тебе оформление на разрешении 1024 пикселя в ширину. С другой стороны, попробуй почитать текст на мониторе с разрешением 1920×1080 — глаза устанут перескакивать с конца строки на начало следующей, так что имеет смысл выставить максимальную ширину примерно на 1200px. И вот в этих пределах — 570 и 1200 px — контент и должен быть растягивающимся.
Но хотелось бы понять, почему так происходит и есть ли "правильное" решение задачи. Так происходит, потому что у языка разметки HTML было трудное детство и большая история изменений. Контейнерный элемент table присутствовал в нём изначально, а вот блочный div и атрибут style (да и вообще адекватная совместимость с CSS) пришли только с версией 3.2 спустя примерно 10 лет. Атрибут style создавался специально для работы с блочными элементами, потому он порой и конфликтует с контейнерами. «Правильное» решение есть, даже несколько, но наиболее логично, на мой взгляд, будет пользоваться предоставленными возможностями и применять min-width, width и max-width параллельно, для чего они и были созданы. На том же хтмлбук в описании первого и последнего из этих атрибутов есть табличка, показывающая, как именно браузеры будут рассчитывать ширину контента при их одновременном применении в зависимости от значений. Лучше всего задавать у максимального/минимального ширину в точках, а у «простого» — в процентах, или наоборот, в зависимости от ситуации. И твой вопрос в результате сведётся к такой вот конструкции (для примера я взял цветную табличку с прошлой страницы и две картинки из википедии — Джоконду (2835×4289 px) и превью фотопортрета С.М. Прокудина-Горского (250×340 px)):
Аноны, помогите! У нас очень простенькая масштабируемая блочная верстка, размер и гарнитура шрифта не заданы. Как в ней лучше сделать стихотворный эпиграф? Чтоб строки начинались на одном уровне (не лесенкой, как при выравнивании по правому краю) и чтоб при небольшом экране строки не разбивались.
Пока думаю заменить пробелы неразрывными пробелами, эпиграф засунуть в блок, сам блок выровнять по правому краю. Получится так?
ак в ней лучше сделать стихотворный эпиграф? Чтоб строки начинались на одном уровне (не лесенкой, как при выравнивании по правому краю) и чтоб при небольшом экране строки не разбивались.
Таблицей. Ставишь таблицу, первый столбец пустой (вернее, с пробелом для надёжности), с шириной где-то 60%, во втором - твой эпиграф. У этого столбца задаёшь минимальную возможную ширину, уже в пикселях, чтобы на стихотворение хватило. Конкретные теги, извини, сразу не подскажу, самой сейчас по справочникам искать надо. Но я что-то подобное уже делала, так что точно можно.
Таблицей. Ставишь таблицу, первый столбец пустой (вернее, с пробелом для надёжности), с шириной где-то 60%, во втором - твой эпиграф. У этого столбца задаёшь минимальную возможную ширину, уже в пикселях, чтобы на стихотворение хватило. Конкретные теги, извини, сразу не подскажу Тэги для такого я знаю. Я боюсь, если у юзера выставлен крупный шрифт, то в такой таблице строки разобьются на части.
Спасибо, вчерашние аноны! В результате сделал блок, прижал к правому краю, указал только максимальную ширину в пикселях, пробелы расставил неразрывные. Проверил на большом мониторе и на смартфоне - вроде работает.
Народ, а если некоторые горизонтальные линии в длинной таблице вдруг выглядят жирными, хотя в коде всё одинаково - это что я не так делаю? *лениво Да что угодно. От настроек шрифта/дизайна в дневнике/сообществе, до неправильно выставленного разрешения экрана.
Нет, серьёзно. Телепаты в отпуске, а причин может быть как минимум три, и они далеко не всегда связаны непосредственно с кодом. Можешь дать код и приложить скриншот? Без имён-явок-паролей, разумеется.
-
-
13.08.2014 в 18:23Если верстать блоками, все работает (большие картинки подгоняются под размер блока). Если вставить такое изображение в таблицу, не все браузеры ужимают картинку до нужного размера.
Что происходит и что я делаю не так?
-
-
13.08.2014 в 18:29Скорее всего, ячейка не воспринимается как родительский элемент, к размерам которого должна подгоняться картинка. Просто заверни её дополнительно в
-
-
13.08.2014 в 18:30-
-
13.08.2014 в 18:44Но тогда маленькие картинки растягиваются, плохо смотрится.
-
-
13.08.2014 в 18:47Анон, я что-то тебя не понял. Тебе надо, чтобы картинки растягивались, но не нравится, что они растягиваются? Так, что ли?
Ну и, если не хочешь, чтобы растягивались маленькие картинки — просто не приписывай им атрибут style="max-width:100%. В чём проблема-то?
-
-
13.08.2014 в 18:48Скорее всего, ячейка не воспринимается как родительский элемент, к размерам которого должна подгоняться картинка. Просто заверни её дополнительно в div style="max-width:100%;"
Пробовал, все равно не работает. Работает такая конструкция:
Но тогда маленькие картинки растягиваются, плохо смотрится.
-
-
13.08.2014 в 18:57Мне нужно, чтобы большие ужимались, а маленькие не растягивались. Для этого и задается ограничение максимального размера, то есть отображаемая картинка может быть меньше, но не может быть больше указанного размера.
Все отлично работает, если верстка блочная. Если картинка внутри таблицы - не работает. Если указать просто размер как html-атрибут - ячейка таблицы воспринимается как родительский элемент, картинка подгоняется (но тогда маленькие картинки растягиваются). Если указать максимальный размер через css, то внутри таблицы такая конструкция работает не во всех браузерах (у меня не работает в ФФ).
Так понятно?
-
-
13.08.2014 в 19:04Повторяю своё предложение. Попробуй просто не приписывать маленьким картинкам атрибут style="max-width:100%;". Или сразу задавай значение атрибута для них не в процентах, а в px.
-
-
13.08.2014 в 19:57Так они же, картинки, для одних мониторов большие, для других маленькие! Мониторы же разные. Что на 27" маленькое, то на смартфоне большое.
Или сразу задавай значение атрибута для них не в процентах, а в px.
А какая разница, в чем задавать, если браузер не воспринимает атрибут? Хоть в попугаях же. И как можно задать относительную ширину в пикселях, это ж верстка перестанет быть резиновой.
Я выкрутился, вынув картинки из таблицы. Получилось более громоздко, зато работает. Но хотелось бы понять, почему так происходит и есть ли "правильное" решение задачи.
-
-
13.08.2014 в 22:25-
-
14.08.2014 в 00:15Добро пожаловать в интернет, родной. Правда, боюсь, с этим открытием ты опоздал — лет так на несколько. В html есть несколько костылей, решающих эту проблему (вроде тега style — подчёркиваю, тега, а не атрибута), вот только дайрики их, насколько мне известно, не поддерживают.
Выход, в принципе, есть — и свой взгляд на этот вопрос я изложу чуть ниже.
А какая разница, в чем задавать, если браузер не воспринимает атрибут?
Если у тебя браузер вдруг перестал воспринимать атрибут style — значит, ты пишешь его неправильно. Потому что все современные браузеры (даже осёл последних версий) адекватно его переваривают, если он правильно задан.
Кроме того, огнелис, на мой взгляд, один из наиболее логичных браузеров, и он будет делать не то, что ты хочешь, а то, что ты сказал ему делать. И если ты говоришь растягивать картинку до максимальной допустимой ширины (то самое style="max-width: 100%;")— он будет делать это всегда, потому что он должен так делать.
И как можно задать относительную ширину в пикселях, это ж верстка перестанет быть резиновой.
Даже у резины всегда есть минимально допустимое значение ширины. Всегда.
Тут немного почти оффтопа на тему, почему нужно брать определённые значения в px
Но хотелось бы понять, почему так происходит и есть ли "правильное" решение задачи.
Так происходит, потому что у языка разметки HTML было трудное детство и большая история изменений. Контейнерный элемент table присутствовал в нём изначально, а вот блочный div и атрибут style (да и вообще адекватная совместимость с CSS) пришли только с версией 3.2 спустя примерно 10 лет. Атрибут style создавался специально для работы с блочными элементами, потому он порой и конфликтует с контейнерами.
«Правильное» решение есть, даже несколько, но наиболее логично, на мой взгляд, будет пользоваться предоставленными возможностями и применять min-width, width и max-width параллельно, для чего они и были созданы. На том же хтмлбук в описании первого и последнего из этих атрибутов есть табличка, показывающая, как именно браузеры будут рассчитывать ширину контента при их одновременном применении в зависимости от значений.
Лучше всего задавать у максимального/минимального ширину в точках, а у «простого» — в процентах, или наоборот, в зависимости от ситуации. И твой вопрос в результате сведётся к такой вот конструкции (для примера я взял цветную табличку с прошлой страницы и две картинки из википедии — Джоконду (2835×4289 px) и превью фотопортрета С.М. Прокудина-Горского (250×340 px)):
читать дальше
Вот как-то так.
Немалая простыня получилась, даже про историю хтмла вспомнил. Инсайд образовательный, блеадь.
-
-
14.08.2014 в 00:17Жаль, что на дайрах нет предпросмотра комментариев.
-
-
15.08.2014 в 00:17Дык, столько прописных истин написал.
style="width:100%; max-width: 570px;"
А вот за этот вариант спасибо. Я его не пробовал чего-то, а он, похоже, работает (т-т-т).
-
-
28.09.2014 в 14:18У нас очень простенькая масштабируемая блочная верстка, размер и гарнитура шрифта не заданы. Как в ней лучше сделать стихотворный эпиграф? Чтоб строки начинались на одном уровне (не лесенкой, как при выравнивании по правому краю) и чтоб при небольшом экране строки не разбивались.
Пока думаю заменить пробелы неразрывными пробелами, эпиграф засунуть в блок, сам блок выровнять по правому краю. Получится так?
-
-
28.09.2014 в 14:24Таблицей. Ставишь таблицу, первый столбец пустой (вернее, с пробелом для надёжности), с шириной где-то 60%, во втором - твой эпиграф. У этого столбца задаёшь минимальную возможную ширину, уже в пикселях, чтобы на стихотворение хватило. Конкретные теги, извини, сразу не подскажу, самой сейчас по справочникам искать надо. Но я что-то подобное уже делала, так что точно можно.
-
-
28.09.2014 в 14:28Тэги для такого я знаю. Я боюсь, если у юзера выставлен крупный шрифт, то в такой таблице строки разобьются на части.
-
-
28.09.2014 в 14:28-
-
28.09.2014 в 14:41А ширину в процентах?
-
-
28.09.2014 в 17:27В процентах с ограничениями по минимуму и максимуму.
-
-
28.09.2014 в 18:11Обычно нет, браузер сам переформатирует таблицу так, чтобы она лучше выглядела - и ужмёт пустой столбец, если для заполненного будет не хватать места.
-
-
29.09.2014 в 09:07В результате сделал блок, прижал к правому краю, указал только максимальную ширину в пикселях, пробелы расставил неразрывные. Проверил на большом мониторе и на смартфоне - вроде работает.
-
-
12.10.2014 в 16:46-
-
12.10.2014 в 17:04-
-
12.10.2014 в 17:49А все, нашел уже, не надо))
А теперь мне подскажи!
-
-
12.10.2014 в 17:52-
-
12.10.2014 в 17:54Держи, дорогой))
-
-
18.10.2014 в 18:37-
-
18.10.2014 в 18:43*лениво
Да что угодно. От настроек шрифта/дизайна в дневнике/сообществе, до неправильно выставленного разрешения экрана.
Нет, серьёзно. Телепаты в отпуске, а причин может быть как минимум три, и они далеко не всегда связаны непосредственно с кодом. Можешь дать код и приложить скриншот? Без имён-явок-паролей, разумеется.
-
-
18.10.2014 в 18:53картинко
-
-
18.10.2014 в 18:56