Измените размер изображения с JavaScript
Одним примером был бы связанный список, где последний объект указывает на первое. Это позволило бы Вам создавать постоянное число объектов, но всегда мочь получить следующий объект.
4 ответа
Если у вас есть ссылка на ваше изображение, вы можете установить его высоту и ширину следующим образом:
var yourImg = document.getElementById('yourImgId');
if(yourImg && yourImg.style) {
yourImg.style.height = '100px';
yourImg.style.width = '200px';
}
В html это будет выглядеть так:
<img src="src/to/your/img.jpg" id="yourImgId" alt="alt tags are key!"/>
Вы можете изменить фактические атрибуты ширины / высоты следующим образом:
var theImg = document.getElementById('theImgId');
theImg.height = 150;
theImg.width = 150;
Если вы хотите изменить размер изображения после его загрузки, вы можете присоединиться к событию onload тега . Обратите внимание, что он может поддерживаться не во всех браузерах ( справочник Microsoft утверждает, что он является частью спецификации HTML 4.0, но спецификация HTML 4.0 не перечисляет
onload для ).
Приведенный ниже код протестирован и работает в: IE 6, 7 и 8, Firefox 2, 3 и 3.5, Opera 9 и 10, Safari 3 и 4 и Google Chrome:
<img src="yourImage.jpg" border="0" height="real_height" width="real_width"
onload="resizeImg(this, 200, 100);">
<script type="text/javascript">
function resizeImg(img, height, width) {
img.height = height;
img.width = width;
}
</script>
Изменить изображение легко, но как вернуть его к исходному размеру после изменения? Вы можете попробовать это сделать, чтобы изменить все изображения в документе обратно на исходный размер:
var i,L=document.images.length;
for(i=0;i<L;++i){
document.images[i].style.height = 'auto'; //setting CSS value
document.images[i].style.width = 'auto'; //setting CSS value
// document.images[i].height = ''; (don't need this, would be setting img.attribute)
// document.images[i].width = ''; (don't need this, would be setting img.attribute)
}