LINUX.ORG.RU
решено Форум — Web-development  

[rails][html][css] Как сделать автоматическое масштабирование изображения?

 ,


0

1

<div class=«post_body»> //<div class=«post_body»>
<%= raw @post.body %> //<p style=«text-align:center;»><img src="http://features.cgsociety.org/newgallerycrits/g07/278807/278807_1283950264_la..." alt=«» /></p>
</div> //</div>

div.post_body {
overflow: visible;
position: absolute;
border: 1px solid #cccccc;
border-top-width: 1px;
margin-left: 200px;
margin-right: 200px;
top: 80px;
background: white;
padding: 30px 15px 0 15px;
}

Попадаются изображения, превышающие по ширине отведённую область (div, около 1000px). Нужно чтобы изображения, как и текст, учитывали отступы. Костыли вроде width=«100%-500px» задачу полностью не решают.

Использовать js для масштабирования на лету как-то криво.

wyldrodney ☆
() автор топика

Менее криво, но всё же костыль.

При логине узнаём размер моника, а потом в кукисах/флеше(рельсовое хранилище) передаём это счастье контроллеру, который пишет параметры в html-код.

wyldrodney ☆
() автор топика
Ответ на: Менее криво, но всё же костыль. от wyldrodney

второй вариант куда более кривой и не очевидный чем первый.

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

rainy
()
Ответ на: комментарий от rainy

Чёт пост не отправился...

В общем, проблема была в redcolth (интерпертатор textile): нужно было дописывать {width: 100%;} в качестве аргумента изображения. А по умолчанию это свойство он опускал, и изображение нельзя было отресайзить средствами css :)

wyldrodney ☆
() автор топика

width: 100% примененный к img работает «как ожидается», не так как у div. а именно img принимает ширину контейнера, а не ширину блока которому задана width.

то есть можно: 

div.right {
 margin-left: 300px;
}
div.img_container {
 margin: 0 20px;
}
div.img_container img {
 width: 100%;
}

rainy
()
Ответ на: комментарий от rainy

Не помню уже в чём именно была трабла, но это не работало :) Не работало даже div.blah_blah > p > img. Сработало только с передачей стиля в качестве аргумента.

wyldrodney ☆
() автор топика
Вы не можете добавлять комментарии в эту тему. Тема перемещена в архив.
Web-development