Одинаковая высота картинок
Здравствуйте! Очень нужна ваша помощь. Пожалуйста подскажите как при помощи джаваскрипт написать код который будет выравнивать высоту картинок и пропорционально уменьшать их ширину. Другими словами у меня нужен скрипт, который бы автоматически выравнивал высоту картинок и пропорционально уменьшал ширину.
|
Высота картинок какая должна быть? Если вы ставите только высоту, то ширина выставится пропорционально соотношению сторон. и делается это стилями.
в данном случае высота в 500 пикселей выставлена у всех картинок
<style>
img{
height:500px;
}
</style>
<img src=screen.jpg>
<img src=screen.jpg>
<img src=screen.jpg>
|
мне нужно сделать следующее:
У изображений сделать ограничение по максимальной ширине и по высоте, так, чтобы все надписи - (названия товаров) были на одном уровне. Максимальную ширину оставить 150 пикселей, максимальную высоту сделать также 150 пикселей. Т.е. изображение похожего товара, сначала, уменьшается по высоте до 150 пикс, и если при этом ее ширина больше 150 пикселей изображение также уменьшается до нужной ширины. |
Как вариант - пихать в div с переполнением, только скрыв полосы прокрутки. Тогда можно "обрезать" выступающие части без трансформации картинки на уровне gd2.
|
нет мне нужен джаваскрипт
|
Да не нужен вам js
будет как вы описали - но стилями. Так будет быстрее работать. <style> img{ max-height:150px; max-width:150px; } </style> <img src=screen.jpg> <img src=screen.jpg> <img src=screen.jpg> |
скажем так начальство требует джава скрипт, было написано на php, но хотят джаваскрипт и ничего не могу с этим сделать
|
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>
|
Спасибо Вам большое!!!! Вы меня оч оч выручили!!!! СПАСИБО!!!!! БОЛЬШОЕ БОЛЬШОЕ!!!! ПРОСТО ОГРОМНОЕ!!!!!
|
Буду теперь джавускрипт учить.
|
| Часовой пояс GMT +3, время: 20:54. |