Пропорциональное растягивание HTML/CSS

12
[Удален]
23125

Пропорциональное растягивание картинки.

У меня есть три блока

HTML

<div class="col_01">

<img src="img/img01.jpg" alt="" />
</div>
<div class="col_02">
Text
</div>
<div class="col_03">
Text
</div>

CSS

.col_01 {float:left;width:50%;}

.col_02 {float:left;width:22%;padding:0 1% 0 2%;}
.col_02 {float:left;width:25%;}

.col_01 img {width:100%;}

.col_01 img {width:100%;} растягивает на 100% ширины col_01, но теряем четкость фотографии. Каким способом можно реализовать такое же, только что бы четкость фотографии оставалось.

Z
На сайте с 14.01.2010
Offline
20
#1

Браузер растягивает изображение...попробуйте дописать... height: auto;

.col_01 img {
width:100%;
height: auto;}
[Удален]
#2

zlideni, ну так то у картинки это стандартная функция вроде как. а четкость теряем.

Попробывал как и height:auto; так и height:100%; непомогает.

Mellifleur
На сайте с 06.05.2011
Offline
57
#3

чтоб не терять четкость нужно вставлять картинки большего размера чем тогда когда она растянется

Хороший хостинг (http://webhost1.ru/?r=16541) - сам пользуюсь и вам рекомендую. Аптайм, время отклика и загрузка на 5!.
[Удален]
#4

Mellifleur, картинки и так большие и качественные.

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

Jekyll
На сайте с 04.05.2009
Offline
136
#5

user007, алгоритмы ресайза картинок в браузерах убогие, в сравнении например, с алгоритмами фотошопа. Если так важно качество - советую сделать несколько картинок в разных размерах, а уже на странице яваскриптом определять какая из картинок ближе всего по ширине к ширине div`a, и загружать именно её

[Удален]
#6

Jekyll, хмм, это гемор! я думаю есть куда более удобное решение с помощью js, jquery. Если бы картинка была фоновой возможно да я бы так и сделал. Но картинка меняется каждый день.

[Удален]
#7

user007, сжать картинку вы можете, а растянуть - только если указывать явно width или height.

[Удален]
#8

sasha_123, точной ширины нету, резиновый макет.

I7
На сайте с 24.10.2007
Offline
61
#9

Сложность данной проблеммы еще в том, что разные браузеры по разному воспринимают правило height: auto; В FF картника начнет растягиваться пропорционально увеличивая свою высоту, в Хроме высота менять не будет. Поэтому когда мне пришлось как то решать похожу проблему, я в ручную скриптом расчитывал пропорции картинки, и прикаждом событии ресайза выставлял принудительно высоту картинки в пикселях, только так удалось добиться кроссбарузерости.

Профессионально верстаю. Joomla. Drupal6-7. Wordpress. Отзывы и благодарности;). (/ru/forum/529741)
[Удален]
#10

icemen777, хмм.... недумаю что нету вариантов автоматизировать это.

12

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий