IE 6 свойство width
Написал скрипт, который меняет размер картинкам, вписывая их в определенные рамки, сохраняя при этом исходные пропорции:
var e = document.getElementsByTagName("img");
var width = 200, height = 300;
var w, h, hi, wi;
for (var i = 0; i < e.length; i++)
if (e[i].className == "ph_cat")
{
w = e[i].width;
h = e[i].height;
hi = h * width / w;
if (hi <= height)
{
e[i].width = width;
e[i].style.paddingTop = (height - hi)/2 + "px";
e[i].style.paddingBottom = (height - hi)/2 + "px";
}
else
{
wi = w * height / h;
if (wi <= width)
{
e[i].height = height;
e[i].style.paddingLeft = (width - wi)/2 + "px";
e[i].style.paddingRight = (width - wi)/2 + "px";
}
}
}
В IE 6 переменные w и h равны 0, помогите пожалуйста разобраться |
e[i].style.width и тд.
|
monolithed,
не работает |
abc_ua так в IE6 работает:
var e = document.getElementsByTagName("img");
var width = 200, height = 300;
var w, h, hi, wi;
for (var i = 0; i < e.length; i++)
if (e[i].className == "ph_cat")
{
w = e[i].width;
h = e[i].height;
hi = h * width / w;
if (hi <= height)
{
e[i].style.width = width +'px';
e[i].style.paddingTop = (height - hi)/2 + "px";
e[i].style.paddingBottom = (height - hi)/2 + "px";
}
else
{
wi = w * height / h;
if (wi <= width)
{
e[i].style.height = height +'px';
e[i].style.paddingLeft = (width - wi)/2 + "px";
e[i].style.paddingRight = (width - wi)/2 + "px";
}
}
}
|
monolithed,
не работает, у меня w и h равны 0 в ie 6 |
Почему тогда у меня в IE6 работает?
http://www.jsfiddle.net/RTq5N/53/ |
monolithed, тут в ie работает, а на сайте - нет)
|
abc_ua, попробуйте offsetWidth и offsetHeight.
|
проблема оказалась не в этом
$.get("ссылка", function (data) {
...
list += "<img...";
...
$("div#ph_catalog").html(list);
});
window.onload = function () {
/* изменение размеров изображений */
});
Такое ощущение, что для ie 6 созданные img не успевают загрузится, отсюда нулевые значения |
-----
|
Изменение размеров картинки надо ставить на onload самой картинки установленному до src
function resize(obj) {
/* изменение размеров изображений */
}
$.get("ссылка", function (data) {
...
list += "<img onload = 'resize(this)' src=...";
...
$("div#ph_catalog").html(list);
});
);
|
рони,
сейчас так и сделано, но опера(9.64) игнорирует onload, а в ie 6 не удается получить image.width |
abc_ua,
пример для проверки в опере и ие ... а лучше сами создайте где нибудь ваш неработающий макет чтобы не гадать
<!DOCTYPE html >
<html>
<head>
<title></title>
<script src="http://code.jquery.com/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
var list = "<img onload = '$(\"#d2\").html(this.width);' src='http://javascript.ru/forum/images/ca_serenity/misc/logo.gif' />"
$('#d1').html(list);
});</script>
</head>
<body>
<div id="d1"></div>
<div id="d2"></div>
</body>
</html>
|
это старый код, кстати, чтобы работало нужно еще дописать обработчик $(window).bind("load", function() {resize(...)});, если ie закэшировал изображение, то его width он НЕ выдаст при <img onload="" alt="" src="" />
|
Цитата:
|
скрипт берет изображения с классом ph_cat и масштабирует(добавляя отступы если нужно) изображения так, чтобы они вписались в прямоугольник со сторонами width и height. Писал когда-то для фотокаталога интернет магазина
|
Цитата:
...Я на юкоз, когда закидывал изображения разного размера в таблицу , стандартным элигном центрировал их , а одним классом для всех них _ сделал им одинаковую высоту то все эти img были по центру в табличных ячейках в опере и фф, а от Эксплорер_ все сместил к левому краю ячейки .Так , что у Вас я нашел ответ ) . Вы,поистине,просто СУПЕР МАСТЕР ! Респект и уважение :thanks: ! |
| Часовой пояс GMT +3, время: 15:34. |