"Резиновые" картинки

[GippoRex]

Дано: общий div с ограниченной max-width, в нем таблица, в таблице 2 несимметричные (задано через проценты) ячейки: в левой картинка, в правой - текст.
На больших разрешениях все ок, все растягивается, где надо, проблем нет. Но вот насчет маленьких... Так как картинка вставлена со 100% размером, она теснит правую ячейку, и в какой-то момент текст в ней просто не помещается и вываливается за границы div.
Как сделать так, чтобы при маленькой ширине картинка начинала уменьшаться? Взять ее в div с max-width не работает, плюс мне это все надо как-нибудь в процентах от размера браузера...

@темы: Html

Comments

[GippoRex]

Спасибо за статью! С:

Такого тега в html не существует

Да уж, действительно зануда %)

ячейка сама растягивается по ширине контента, а таблица тянется по ширине ячеек

Да, но фишка в том, что ячейка, по идее, должна растянуться больше, чем контент. Грубо говоря, выравнивание должно происходить в обход границ таблицы и опираться на внешние. Что приведет к растягиванию таблицы.
Аргх, в общем, еще одна гифка, так проще.

[Скептичный циник]

Гифки – офигенно наглядный способ, однако! (:
Теперь пони. Это легко сделать с помощью max-width:50% для всей таблицы, где вместо 50% что угодно.
Если нужен more справа, то для ячейки position:relative, а для more position:absolute и right:0. Ибо абсолютный блок внутри относительного ведёт отсчёт своих координат от относительного родителя.
Однако, ячейка может быть шире контента только если её ширина задана явно и без процентов (проценты будут считаться от ширины таблицы). Такое поведение можно визуально обмануть, если забить ячейку контентом, но сделать его невидимым. Обновил пример

[GippoRex]

Гифки – офигенно наглядный способ, однако! (:

Дааа, я просто обожаю их делать!

Обновил пример

Мм, немного не то, что я имела в виду. Требуется, чтобы слово "Sup" проходило ровно по границе 50%, а у вас оно выровнено внутри половины.

max-width:50%

Но ведь, когда контент выравнивается посередине, таблица будет занимать больше, чем 50%. Потому что граница половины будет проходить ровнехонько посередине контента, а правая его часть вылезает на вторые 50%. Итого max-width таблицы будет не 50%, а 50% + ??? небольшая частичка.

Но идея со скрытым контентом мне нравится >:3 Можно, например, вставить невидимую картинку, задав ей сжимаемость под браузер, и она растянет таблицу под место для контента.

[Скептичный циник]

> Требуется, чтобы слово "Sup" проходило ровно по границе 50%, а у вас оно выровнено внутри половины.
В код-то хотя бы смотрели? text-align:center; замените на right и будет счастье. При желании ещё подвигать – margin-top/-right/-bottom/-left и остальные обычные инструменты передвижения блока по странице в помощь.

> таблица будет занимать больше, чем 50%
Если написано условие max-width:50%, то больше, чем 50% места занимать она не будет. В примере по ссылке за красную черту таблица не зайдёт сколько бы контента в ней не было. Для случаев длинныхнесуществующихслов можно использовать break-word/ellipsis/overflow/usw на вкус.

> Итого max-width таблицы будет не 50%, а 50% + ??? небольшая частичка
Это всё типичная ситуация с блочной моделью css. Варианта три:
1. Смиритесь, так устроен язык, что в понятие ширины входит всё, кроме полей (включая границы, отступы, контент). Верстальщики же живут и делают дело. Например, писать не 50%, а 49%.
2. Для изменения поведения из п.1 используйте box-sizing (например, со значением border-box). Если бы удосужились посмотреть в код примера, то увидели бы эту запись.
3. Для особых эстетов появился даже calc(), использовать который как-то так: .mah{width:calc(50%-2px)}

> Можно, например, вставить невидимую картинку
Можно. Ячейке без разницы каким контентом её будут распирать (: Главное чтобы контент внутри неё был в потоке.

[GippoRex]

В код-то хотя бы смотрели?

Да, смотрела :I Опять же, выравнивание не будет корректным, потому что правая граница контента будет совпадать (или чуть не доходить) до половины, а должна - переваливать.

Если написано условие max-width:50%, то больше, чем 50% места занимать она не будет.

Я знаю v_v В том-то и дело, что надо, чтоб она занимала больше 50%. Подтягивание отступами не решает полностью проблему, потому что будет актуально только для одного конкретного случая с конкретными же параметрами контента. Оттого растягивать таблицу только на 50% от внешнего блока не подходит; выравнивание по правому краю внутри таблицы предполагает, что граница таблицы совпадает с предполагаемым правым краем отцентрированного элемента, а это не так.

Смиритесь, так устроен язык

Но я НЕ жалуюсь, я наоборот хочу, чтобы так получилось!
Окей, видимо, я совсем не умею оперировать словами, или вы меня не понимаете, потому вот

Часть контента вылезает за границу 50%, именно поэтому я написала, что таблица будет иметь ширину больше, чем 50%.

Но это решается, если растянуть таблицу на 100%, а потом отцентрировать внутри ячейки. Так что, можно сказать, ответ я уже получила с невидимым контентом.

[Скептичный циник]

> Опять же, выравнивание не будет корректным, потому что правая граница контента будет совпадать (или чуть не доходить) до половины, а должна - переваливать.
1. Я же писал про поля: делаем margin-right:-2rem; или сколько там нужно и хоть куда.
2. Для резиновости блок с "sup" можно вытащить из потока, растянуть по всей ширине браузера и добавить text-align:center

> надо, чтоб она занимала больше 50%
Раз надо больше 50%, то измените значение max-width для таблицы и всё – будет столько, сколько нужно.

> потому вот
Minor update

[GippoRex]

Можно, например, вставить невидимую картинку, задав ей сжимаемость под браузер, и она растянет таблицу под место для контента.

Кх, я думала, это будет просто, но я такое днище, что мне трудно мыслить вне уже данных примеров. Я честно пыталась нагуглить и найти ответ в уроках, но там обсуждается проблема вне таблиц. Таблицы - зло
Width:100% высчитывается из разрешения браузера, если блок не вложен в другой блок. В этом случае ширина будет высчитываться из разрешения родителя, так? А как сделать, чтобы вложенный блок обходил внешний и опирался на браузер/самый-самый верхний блок?..
Просто, в случае с невидимой картинкой, я не могу добиться того, чтобы она изменяла размер в зависимости от изменения размера браузера. С прописанным width:100% она скукоживается до первоначальных размеров таблицы, ничего не растягивая, а с прописанным max-width:100% она при любых размерах браузера остается в размере 100%, и таблицы вылезает за края всего и вся.
Я понимаю, что я вернулась к первоначальной проблеме этого треда, но подходившее тогда решение сейчас уже не помогает :с

[GippoRex]

делаем margin-right:-2rem; или сколько там нужно и хоть куда

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

измените значение max-width для таблицы

Вся соль в том, что до раскрытия MORE она должна быть меньше 50% (да, я знаю, мои примеры и задачи отличаются крайней странностью)

вытащить из потока

Position: absolute? Хммм, точнооо, спасибо!!

[Скептичный циник]

Посмотрите обновлённый пример – то, что нужно? Не?
В прошлых версиях было много магического кода, который, вроде как, можно убрать, если я правильно понял задание из последних двух гифок.
Да и до сих пор не понятно зачем всё это (:

[GippoRex]

Position: absolute

Бзв, это позиционирование в моем случае с

вставить невидимую картинку, задав ей сжимаемость под браузер, и она растянет таблицу под место для контента

таки тоже не помогает.
Код, если что:

Text text text text!!!!!

Text text text text text text text text text text text text text text text text tex!!!!!

Text text text text text text text text text text text text text text text text tex!!!!!

<div style="border: 5px solid #333333; width: 90%; max-width:750px;"><table border="2" cellpadding="3" style="margin: 20px; float:left;">
<tr><td><font color="#333333"><span style="font-size:15pt; font-weight: bold;">Text text text text!!!!!</span></font></td></tr>
<tr><td width="300px;"><font color="#7c7b7b">Text text text text text text text text text text text text text text text text tex!!!!!</font></td></tr>
<tr><td><font color="#333333">[MORE=<img src="http://placehold.it/270x150" alt="ЗАГЛУШКА">]<div style="visibility: hidden;" align="center"><img style="max-width:100%; position:absolute" src="http://placehold.it/670x1" alt="изображение"></div>
<div text-align="center"><b>Text text text text text text text text text text text text text text text text tex!!!!!</b></div>[/MORE]</font></td></tr></table><div style="clear: both;"></div>

[GippoRex]

то, что нужно? Не?

Оно, но вся проблема в том, что текст-то переносится, а для картинки нужна сжимаемость :с Алсо в свернутом виде у меня таблица фиксированной ширины, поэтому текст ее растянуть не сможет, только картинка. (да и код картинки занимает места меньше, чем текст)

Да и до сих пор не понятно зачем всё это (:

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

[Скептичный циник]

> Оно, но вся проблема в том, что текст-то переносится, а для картинки нужна сжимаемость
И снова обновил пример – теперь вместо скрытого текста скрытая картинка. Всё сжимаемо, где проблема? (о.0)
Да и в вашем случае тоже работает так же, хотя и визуально мало заметно из-за max-width у корневого div'а.

> текст ее растянуть не сможет, только картинка
ДлинноеНепереносимоеСловоВродеТакогоТочноСможетРасширитьТаблицуЕслиНеПереноситьПринудительноВСтилях.

[GippoRex]

тоже работает так же

Разве? Я получила вот это, а мне бы хотелось, чтобы таблица не вылезала за края внешнего блока.
То есть, есть некая таблица фиксированной ширины (что вынуждает текст в ячейке переноситься). По клику на MORE одна из ячеек растягивается, что вынуждает таблицу поступиться на ранее ограничение. Ваш пример всем хорош, но ширина таблицы первоначально зависит от контента; будь там массивный текст, а не одно слово, выглядело бы по-другому. У меня, думаю, как раз вся проблема в том, что изначально таблица фиксированной ширины...

ДлинноеНепереносимоеСловоВродеТакогоТочноСможетРасширитьТаблицуЕслиНеПереноситьПринудительноВСтилях

Или nowrap С:

[GippoRex]

...Ок-кей О__о
Проверила в хроме - мой пример работает. А в лисе нет.

[GippoRex]

...nevermind, совершенно случайно нашла ошибку: у меня было прописано ограничение всей таблице. Если ограничить ширину только текстовой ячейки, и еще прописать у картинки "width: 100%", а не "max-width", все работает корректно С:

На этом у меня вопросы заканчиваются (for now), словами не могу передать, как вы мне помогли! ОГРОМНОЕ спасибо за то, что потратили время на разжевывание странных и примитивных примеров

[Скептичный циник]

О, стоит оставить интернет на сутки, как появляются новые вопрос и новые ответы на них сами по себе хД

> спасибо
Носите не снашивайте (: