Реальная ширина изображения с JavaScript

Question

У меня есть следующая функция:

function setImagesWidth(id,width) {
    var images = document.getElementById(id).getElementsByTagName("img");
    for(var i = 0; i < images.length;i++) {
        // If the real width is bigger than width parameter
            images[i].style.width=width;    
        //}         
    }       
}

Я хотел бы установить для атрибута css width всех моих тегов img определенное значение, только когда реальная ширина изображения больше значения атрибута. Если это возможно, я хотел бы решение, которое не использует какую-либо конкретную структуру.

---

images[i].offsetWidth возвращает 111 для изображения шириной 109 пикселей. Это потому что 1px каждая боковая граница?

Answer 1

Вот, надеюсь, достаточно примера кода, чтобы дать вам то, что вы хотите:

var myImage = document.getElementById("myImagesId");
var imageWidth = myImage.offsetWidth;
var imageHeight = myImage.offsetHeight;

Это должно дать вам цифры, которые вам нужны, чтобы получить решение, которое вы хотите. Я думаю, что вы можете написать остальную часть кода самостоятельно. :)

---

РЕДАКТИРОВАТЬ: Здесь я не мог с собой поделать - это то, что вы ищете?

function setImagesWidth(id,width) {
   var images = document.getElementById(id).getElementsByTagName("img");
   for(var i = 0; i < images.length;i++) {
      if(images[i].offsetWidth > width) {
         images[i].style.width= (width + "px");
      }
   }           
}

Answer 2

@ Серхио дель Амо: Действительно, если вы перейдете по моей ссылке, вы увидите, что вы хотите clientWidth вместо.

@ Серхио дель Амо: К сожалению, вы не можете принять собственный ответ. Но у вас есть лишний период в суффиксе «px», так что давайте пойдем с этим, включая изменение clientWidth:

// width in pixels
function setImagesWidth(id, width)
{
    var images = document.getElementById(id).getElementsByTagName("img");
    var newWidth = width + "px";
    for (var i = 0; i < images.length; ++i)
    {
        if (images[i].clientWidth > width)
        {
            images[i].style.width = newWidth;
        }                       
    }
}

Answer 3

На всякий случай, если вы, читатель, пришли сюда из Google, ищите способ узнать, что на самом деле представляет собой файл ширина и высота пикселя, вот как:

var img = new Image("path...");
var width = image.naturalWidth;
var height = image.naturalHeight;

Это становится весьма полезным при работе со всеми видами рисования на масштабированных изображениях.

    var img = document.getElementById("img");
    var width = img.naturalWidth;
    var height = img.naturalHeight;
    document.getElementById("info").innerHTML = "HTML Dimensions: "+img.width+" x "+img.height + 
                                                "\nReal pixel dimensions:"+ 
                                                width+" x "+height; 

Answer 4

РЕДАКТИРОВАТЬ: Могу ли я принять этот ответ как окончательный?

Поскольку offsetWidth не возвращает ни одной единицы, окончание .px должно быть объединено для атрибута css.

// width in pixels
function setImagesWidth(id,width) {
    var images = document.getElementById(id).getElementsByTagName("img");
    for(var i = 0; i < images.length;i++) {
        if(images[i].offsetWidth > width) {
            images[i].style.width= (width+".px");   
        }           
    }       
}

Answer 5

Осторожно, похоже, вы, скорее всего, захотите clientWidth:

http://developer.mozilla.org/en/Determining_the_dimensions_of_elements