посмотрел, теперь слухай сюды:
Показанный пример несколько отличается (противоречит) от постановки. Там видишь, есть низкие картинки-баннеры, т.е. высота минимальная не установлена, только ширина. Поэтому я хотел конкретный пример, а не постановку, которую потом 10 раз изменят.
На базе этого написал некий общий скрипт, который будет годиться и для заданной высоты, и для незаданной. А также для правки картинок вообще где угодно - в текстах, в многостолбцовых таблицах перевью-картинок (thumbnails) - задавайте правильно ширину и высоту или только ширину, и скрипт сработает.
Это не окончательный продукт, потому что делает характерный скачок из размеров таблицы в невидимом сосотоянии в размеры видимой таблицы. Так сказать, идея в полуголом виде. (Для кого эротика, для кого ...)
| Код | <title>Картинки не более заданной ширины.</title>
<script>d=document;g=function(a){return d.getElementById(a);}
loadGallery=function(objGal,nameGal,widthGal,heightGal){//вывод галереи
//параметры:(объект_в котором правят размеры,
// имя группы картинок,
// макс.ширина и высота(может отсут.) картинки)
if(!heightGal)heightGal=1999;
g(objGal).style.width=widthGal;
var arrGal=d.getElementsByName(nameGal);
var i,k;
for(i=0;i<arrGal.length;i++){
k=1;
if(arrGal[i].offsetWidth>widthGal)k=arrGal[i].offsetWidth/widthGal;
if(arrGal[i].offsetHeight>heightGal)k=Math.max(k,arrGal[i].offsetHeight/heightGal)
arrGal[i].style.width=arrGal[i].offsetWidth/k;
arrGal[i].style.visibility='visible';
}
}</SCRIPT>
<body onload=g('in1').disabled=g('in2').disabled=!1;>
<B>Картинки не более заданной ширины.</B><br><br>
<STYLE>img{visibility:hidden;}
#gal{text-align:center;}
</STYLE>
<input id=in2 type=button value=Править_галерею_на_400х280 onclick=loadGallery('gal','gal1',400,280) disabled><br>
<input id=in1 type=button value=Править_галерею_на_100х... onclick=loadGallery('gal','gal1',100) disabled><br><br>
<div id=gal>
<img name=gal1 src=Imaf4-YM20041031.jpg><br><br>
<img name=gal1 src=fo167-YM20030829-1.jpg><br><br>
<img name=gal1 src=snow21.gif><br><br>
</div>
(размеры без Reload не восстанавливаются) |
Демо здесь: http://js2.ru/example/JsPrimeryCode-61.htm
Наконец, "заказывали" чтобы малые картинки занимали столько же места, как большие. Это сделать, очевидно, легко без скриптов, помещая каждую картинку в таблицу заданных минимальных размеров.
Также замечу, что масштабирование затрагивает только те картинки, которые имеют имя name=... , которое может быть разным для разных групп. Поэтому масштабировать группы можно с разными параметрами. |
)
.