<div style="width:100%">
<img />
</div>
Ширина картинки = 500px.
Как сделать так, чтобы картинка уменьшалась в размере относительно родительского блока, при этом не увеличивалась выше своей максимальной ширины?
Есть идея как считывать размер через getimagesize, и прописывать: width:100%; max-width:$width , но мне интересна реализация именно на стороне разметки HTML, возможно есть какое-то решение, подскажите.
П.С. если div = 400px, то картинка тоже 400px, если div = 600, то картинка максимум свой = 500px.
Спустя 1 час, 42 минуты, 49 секунд (5.11.2011 - 10:54) Renden написал(а):
imbalance_hero
А с max-width:100%; не канает?)
ЗЫ я даже проверил, размер выставляется как ты сказал:
А с max-width:100%; не канает?)
ЗЫ я даже проверил, размер выставляется как ты сказал:
| Цитата |
Как сделать так, чтобы картинка уменьшалась в размере относительно родительского блока, при этом не увеличивалась выше своей максимальной ширины? |
<style>
#some {width:600px;background:grey;}
#some img{max-width:100%;}
</style>
<html>
<body>
<div id="some">
<img src="test.jpg">
</div>
</body>
</html>
Спустя 1 час, 56 минут, 24 секунды (5.11.2011 - 12:50) imbalance_hero написал(а):
Renden
Точно, работает... видимо проблема в другом.
Надо, чтобы внутри таблицы работало:
Фотография растягивает таблицу.
Даже если внутрь <td> помещаю <div>, таблица всё равно тянется до полного размера фотографии...
Точно, работает... видимо проблема в другом.
Надо, чтобы внутри таблицы работало:
<style>
#some {width:50%; height:1000px;background:grey; margin:10px}
#some img{max-width:100%;}
</style>
<html>
<body>
<table id="some">
<tr>
<td>
<img src="http://site.ru/photo/1320437487hpqk.jpg" />
</td>
</tr>
</div>
</body>
</html>
Фотография растягивает таблицу.
Даже если внутрь <td> помещаю <div>, таблица всё равно тянется до полного размера фотографии...
Спустя 1 час, 2 секунды (5.11.2011 - 13:50) sergeiss написал(а):
Если ты гарантированно хочешь, чтобы фото не тянуло таблицу, то поставь это фото в background, пропиши там в URL. Наверное, для TD надо.
Типа такого, или то же самое в отдельном файле со стилями, без разницы:
Типа такого, или то же самое в отдельном файле со стилями, без разницы:
style="background: url(your_picture.jpg); background-repeat:no-repeat;"
Спустя 12 минут, 28 секунд (5.11.2011 - 14:03) Renden написал(а):
imbalance_hero
Несовсем понимаю теперь что тебе нужно но если что так тоже работает :)
Несовсем понимаю теперь что тебе нужно но если что так тоже работает :)
<style>
#some td{max-width:100px;background:grey;}
#some img{max-width:100%;}
</style>
<html>
<body>
<table id="some">
<tr>
<td>
<img src="http://images.wikia.com/fallout/images//2/2a/Fallout2front.jpg" />
</td>
</tr>
</div>
</body>
</html>
Спустя 8 часов, 25 минут, 52 секунды (5.11.2011 - 22:28) imbalance_hero написал(а):
<style>
#some td{max-width:50%;background:grey;}
#some img{max-width:100%;}
</style>
<html>
<body>
<div style="width:100%">
<table id="some">
<tr>
<td>
<img src="http://images.wikia.com/fallout/images//2/2a/Fallout2front.jpg" />
</td>
</tr>
</table>
</div>
</body>
</html>
Ну вот, ты поставил именно ФИКСИРОВАННУЮ ширину, а я говорил про резиновую. Мобильная версия сайта, размер экрана: 300px , размер фотографии, которую добавляют люди: 500px, я хочу их автоматически уменьшать в таком случае.
Вот если ставлю %, получаю: http://my.jetscreenshot.com/7950/20111105-4hf7-55kb
Спустя 1 минута, 2 секунды imbalance_hero написал(а):
sergeiss
В таком случае картинка будет резаться, а мне надо именно её уменьшать.
Спустя 2 минуты, 38 секунд imbalance_hero написал(а):
Renden
Вот, уменьшаем размер браузера до 300px, далее выставляем так, чтобы картинка была на % от размера выставленного пользователем. Теперь увеличиваем размер браузера до 500-1000px по ширине - картинка тоже должна увеличиваться. Вот в чём дело, резиновая верстка, тянуться должна.
Вот как ты показал с фиксированной шириной - работает! А если ставлю вместо фиксированной - процент, то уже перестаёт.
Спустя 11 дней, 15 часов, 19 минут, 14 секунд (17.11.2011 - 13:48) inpost написал(а):
Вообщем, с таблицами работать не хочет, с блоками <div>, которые ВНЕ таблицы - работает нормально.
Так как я проектировал мобильную верстку - плюнул на таблицы, и переделал обычными блоками <div>.
Как заставить быть ФИКСИРОВАННЫМ таблицу я так и не понял, то есть чтобы дочерние объекты не расширяли таблицу в случае, если они больше(!!!).
Так как я проектировал мобильную верстку - плюнул на таблицы, и переделал обычными блоками <div>.
Как заставить быть ФИКСИРОВАННЫМ таблицу я так и не понял, то есть чтобы дочерние объекты не расширяли таблицу в случае, если они больше(!!!).
Спустя 1 минута, 46 секунд (17.11.2011 - 13:49) Семён написал(а):
| Цитата |
| то есть чтобы дочерние объекты не расширяли таблицу в случае, если они больше(!!!). |
Можно попробовать overflow
Спустя 42 минуты, 14 секунд (17.11.2011 - 14:32) sebastjan написал(а):
один вариант чтоб не тянуло картинку -ЯВаСкрипт , сначала проверять разрешение экрана, потом передавать размер картинке в таблицу.
Но есть одно НО, при динамическом ресайзе - очень страдает качество, а трафик по сути остаётся тот же, что очень актуально для мобильных устройств.
Там борьба за каждый байт.
минимуи ЦСС, минимум ХТМЛ, картинки оптимизированны по самое не хочу.
Второй и наверное самый удачный - это отдельно под маленький экран делать сайт.
Но по любому сначала лучше проверка разрешения и относительно результата редирект на нужный сайт.
Я так покумекал - минимум три сайта делать надо, под телефоны, под планшеты, под нормальный монитор.
Но есть одно НО, при динамическом ресайзе - очень страдает качество, а трафик по сути остаётся тот же, что очень актуально для мобильных устройств.
Там борьба за каждый байт.
минимуи ЦСС, минимум ХТМЛ, картинки оптимизированны по самое не хочу.
Второй и наверное самый удачный - это отдельно под маленький экран делать сайт.
Но по любому сначала лучше проверка разрешения и относительно результата редирект на нужный сайт.
Я так покумекал - минимум три сайта делать надо, под телефоны, под планшеты, под нормальный монитор.
Спустя 2 часа, 3 минуты, 47 секунд (17.11.2011 - 16:35) sergeiss написал(а):
| Цитата (sebastjan @ 17.11.2011 - 15:32) |
| Я так покумекал - минимум три сайта делать надо, под телефоны, под планшеты, под нормальный монитор. |
"Не смешите мои подковы!" (с)
Это всё делается легко и просто. Есть такая хрень в CSS под названием "media". Там можно задать тип устройства, на котором будет работать то или иное свойство. И размеры, и даже надо ли вообще показывать тот или иной блок. Всё можно сделать.
Да и даже для печати можно задать отдельный набор параметров, так же через media.
Можно также дать возможность юзеру самому выбрать набор правил, которые будут показывать сайт так, как ему больше понравится.
PS. Даже какие картинки использовать, и то можно задать в CSS, с указанием, для какого media какие картинки брать.
Спустя 5 минут, 46 секунд (17.11.2011 - 16:41) Семён написал(а):
sergeiss
Твоими бы устами....
Твоими бы устами....
Спустя 9 минут, 55 секунд (17.11.2011 - 16:51) sergeiss написал(а):
Семён - а в чем проблемы, кто мешает CSS использовать для таких целей? Там же есть все инструменты, нужные для этого.
Спустя 2 минуты, 6 секунд (17.11.2011 - 16:53) Семён написал(а):
sergeiss
Понимаешь, сейчас уже эра новых технологий, вёрстка делается с учётом Touch-технологий.
Поэтому одним CSS здесь далеко не обойтись, как правило под mobile устройства делается отдельная версия сайта (как правило на под домене m.site.com)
Лепить всё на одном шаблоне, не гуманно, да и трафик лишний.
Понимаешь, сейчас уже эра новых технологий, вёрстка делается с учётом Touch-технологий.
Поэтому одним CSS здесь далеко не обойтись, как правило под mobile устройства делается отдельная версия сайта (как правило на под домене m.site.com)
Лепить всё на одном шаблоне, не гуманно, да и трафик лишний.
Спустя 1 минута, 12 секунд (17.11.2011 - 16:54) inpost написал(а):
sergeiss
Если взглянуть на Irbis, то там есть подключение разных шаблонов. Я у себя как раз сделал 2 шаблона, общий сайт (статика, ширина 1000px), и мобильную версию (резина).
Даже вопрос не в том, что можно всё сделать на css, это то да, но тут пришлось передалать расположение блоков. Большую часть таблиц перевёл в блоки, а другую часть таблиц - разделил вместо 4-х колонок на 2 колонки, в 2 ряда.
Ситуация была совсем другая, спустя почти год работы сайта нужно делать мобильную версию. Хотя даже если бы я сразу проектировал так, чтобы css лишь править, было бы мне слишком нервозно
Если взглянуть на Irbis, то там есть подключение разных шаблонов. Я у себя как раз сделал 2 шаблона, общий сайт (статика, ширина 1000px), и мобильную версию (резина).
Даже вопрос не в том, что можно всё сделать на css, это то да, но тут пришлось передалать расположение блоков. Большую часть таблиц перевёл в блоки, а другую часть таблиц - разделил вместо 4-х колонок на 2 колонки, в 2 ряда.
Ситуация была совсем другая, спустя почти год работы сайта нужно делать мобильную версию. Хотя даже если бы я сразу проектировал так, чтобы css лишь править, было бы мне слишком нервозно
Спустя 6 часов, 18 минут, 19 секунд (17.11.2011 - 23:13) sebastjan написал(а):
Ничего смешного 
sergeiss.
Структура шаблона-темплайта совершенно другая, а использовать общий ЦСС для того и другого - это накладно, ЦСС как правило будет большой. Точить надо под мобильные устройства с учётом трафика.
Взять ту же резину по ширине для планшетников, дизайн под них не подойдёт под мобильники, по умному чтоб максимально охватить аудиторию - надо три варианта.
Я лично такой способ приветствую.
sergeiss.Структура шаблона-темплайта совершенно другая, а использовать общий ЦСС для того и другого - это накладно, ЦСС как правило будет большой. Точить надо под мобильные устройства с учётом трафика.
Взять ту же резину по ширине для планшетников, дизайн под них не подойдёт под мобильники, по умному чтоб максимально охватить аудиторию - надо три варианта.
Я лично такой способ приветствую.
Спустя 9 часов, 30 минут, 27 секунд (18.11.2011 - 08:43) sergeiss написал(а):
sebastjan - ну я ж и не настаиваю, что только так и никак иначе :) Естественно, что можно и так, и эдак, в зависимости от кучи разных условий.
Просто, вроде как, CSS именно для того и делался, чтобы можно было в бОльшей степени подойти к модели MVC. В данном случае одна начинка, но разное представление, вплоть до выключения показа отдельных блоков и до того, что не загружать какие-то картинки, либо загружать картинки другого качества и объема.
Просто, вроде как, CSS именно для того и делался, чтобы можно было в бОльшей степени подойти к модели MVC. В данном случае одна начинка, но разное представление, вплоть до выключения показа отдельных блоков и до того, что не загружать какие-то картинки, либо загружать картинки другого качества и объема.
| Цитата (sebastjan @ 18.11.2011 - 00:13) |
| а использовать общий ЦСС для того и другого - это накладно, ЦСС как правило будет большой |
А вот тут я не понял... Зачем общий ЦСС, если можно И НУЖНО (!) делать разные файлы ЦСС и подключать только тот, что требуется? Например
<link rel="stylesheet" type="text/css" href="print.css" media="print">
в media можно указать любой тип оборудования. Ну, естественно, "любой" из возможного перечня.