Форум

Irina13 · #1 (**permalink**) 27.02.2012, 21:55

Здравствуйте! Очень нужна ваша помощь. Пожалуйста подскажите как при помощи джаваскрипт написать код который будет выравнивать высоту картинок и пропорционально уменьшать их ширину. Другими словами у меня нужен скрипт, который бы автоматически выравнивал высоту картинок и пропорционально уменьшал ширину.

Rootpassword · #2 (**permalink**) 27.02.2012, 22:16

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

<style>
img{
height:500px;
}
</style>
<img src=screen.jpg>
<img src=screen.jpg>
<img src=screen.jpg>

Irina13 · #3 (**permalink**) 27.02.2012, 22:25

мне нужно сделать следующее:
У изображений сделать ограничение по максимальной ширине и по высоте, так, чтобы все надписи - (названия товаров) были на одном уровне.
Максимальную ширину оставить 150 пикселей, максимальную высоту сделать также 150 пикселей.
Т.е. изображение похожего товара, сначала, уменьшается по высоте до 150 пикс, и если при этом ее ширина больше 150 пикселей изображение также уменьшается до нужной ширины.

Serg_pnz · #4 (**permalink**) 27.02.2012, 22:36

Как вариант - пихать в div с переполнением, только скрыв полосы прокрутки. Тогда можно "обрезать" выступающие части без трансформации картинки на уровне gd2.

Irina13 · #5 (**permalink**) 27.02.2012, 22:37

нет мне нужен джаваскрипт

Rootpassword · #6 (**permalink**) 27.02.2012, 22:58

Да не нужен вам js
будет как вы описали - но стилями. Так будет быстрее работать.
<style>
img{
max-height:150px;
max-width:150px;
}
</style>
<img src=screen.jpg>
<img src=screen.jpg>
<img src=screen.jpg>

Irina13 · #7 (**permalink**) 27.02.2012, 23:03

скажем так начальство требует джава скрипт, было написано на php, но хотят джаваскрипт и ничего не могу с этим сделать

рони · #8 (**permalink**) 27.02.2012, 23:15

Irina13,
Вариант ...

<!DOCTYPE html>
<html>
<head>
  <title></title>
<script language="JavaScript" type="text/javascript">
function imgminimum(obj)
{var imgmax = 150; // максимальный размер картинки
var h = obj.height;
var w = obj.width;
if (h>imgmax||w>imgmax){if (h>w) {obj.height=imgmax}else {obj.width=imgmax}};
 }
function img_all()
{
   var img = document.getElementsByTagName('img');
   for (var i=0; i<img.length; i++)  {
     imgminimum(img[i])
   }
}
window.onload =  img_all
</script>
</head>
<body>
<img src="http://igrushka.kz/vip45/imn2/0-18-11.jpg" border="0" alt="" />
<img src="http://www.dogi.ru/agency/images/akita1.jpg" border="0" alt="" />
</body>
</html>

Irina13 · #9 (**permalink**) 27.02.2012, 23:22

Спасибо Вам большое!!!! Вы меня оч оч выручили!!!! СПАСИБО!!!!! БОЛЬШОЕ БОЛЬШОЕ!!!! ПРОСТО ОГРОМНОЕ!!!!!

Irina13 · #10 (**permalink**) 27.02.2012, 23:33

Буду теперь джавускрипт учить.

Форум

Справочник

Discord чат

Курсы javascript