динамически двойной размер изображения

Question

У меня есть смущающий вопрос: как я могу отображать изображение с удвоенным размером без жесткого кодирования атрибутов ширины и высоты? Вот что я пробовал, но мне пришлось просто ввести 1000 для ширины и высоты. Что-то не так с моей функцией? Благодаря!

<img onload="double(self.id);" name="bigPic" id="bigPic" src="album1.jpg" height="1000" width="1000"/> 

    function double(id) { 
     var img = document.getElementById(id); 
     var dblWdth = img.width * 2; 
     var dblHt = img.height * 2; 

     img.height = dblHt; 
     img.width = dblWdth; 
    } 

Answer 1

вы должны использовать функцию window.load() для достижения этой

window.onload=function() {double("bigPic"); 
    } 

Answer 2

window.onload = function() { 
    double("bigPic") 
}; 

Это должно сделать трюк. Вы можете использовать метод onload для окна, чтобы делать все, что нужно сделать при загрузке страниц.

Answer 3

если вы используете JQuery, вы можете сделать это следующим образом:

<img name="bigPic" id="bigPic" src="album1.jpg" /> 

<script type="text/javascript"> 
    $(document).ready(function() { 
     $("#bigPic")[0].width *= 2; 
     $("#bigPic")[0].height *= 2; // may not be necessary, see note 
    }); 
</script> 

без JQuery: как указал Okonomiyaki3000, double не хорошее имя для имени функции, так как это зарезервированное слово для данных введите JavaScript.

<img name="bigPic" id="bigPic" src="album1.jpg" onload='superSize(this);' /> 

function superSize(me) { 
    me.width = me.width * 2; 
    me.height = me.height * 2; //may not be necessary, see note 
} 

примечание: выглядит, если вы не указали высоту, высота автоматически удваивается. и наоборот для ширины. но я тестировал только на IE9 и FF12.

Answer 4

Не double(self.id); но double(this.id);

demo.

И вы могли бы просто пройти this, что будет проще.

function double(img) { 
    img.height *= 2; 
    img.width *= 2; 
} 

Answer 5

Для этого вам не нужен javascript. Вы можете сделать это с помощью CSS.

img { 
    zoom: 2; 
    -webkit-transform: scale(2); 
    -moz-transform: scale(2); 
    -ms-transform: scale(2); 
    -o-transform: scale(2); 
    transform: scale(2); 
} 

Это, конечно, будет удвоить размер всех изображений на странице. Возможно, вместо этого вы хотели бы создать класс и назначить его для всех изображений, которые должны быть удвоены или найти другой способ выбора только этих изображений. Вы также можете установить его в два раза по размеру при наведении курсора мыши (наведите указатель мыши) или увеличьте анимацию (в некоторых браузерах) исключительно с помощью css.