Изменение размера изображения в формате HTML с помощью Javascript

Question

Итак, я пытаюсь создать меню выбора для изменения размера изображения, но я не знаю, что не так с этим фрагментом кода или как его исправить.

HTML:

<img id="dogpicture" src="dog1.png" alt="dog" height="150" width="150"></img> 

<select id="dogsize" name="sizeofdog" onchange="dogsize(this.value);"> 
    <option value="small"> small </option> 
    <option value="default" selected> default </option> 
    <option value="big"> big </option> 
</select> 

JS:

function dogsize(option){ 
    if (option == "small"){ 
     document.getElementById('dogpicture').height = "50"; 
     document.getElementById('dogpicture').width = "50"; 
    } 
    if (option == "default"){ 
     document.getElementById('dogpicture').height = "100"; 
     document.getElementById('dogpicture').width = "100"; 
    } 
    if (option == "big"){ 
     document.getElementById('dogpicture').height = "150"; 
     document.getElementById('dogpicture').width = "150"; 
    } 
} 

Answer 1

Кажется, что работает отлично. Единственное изменение, которое я сделал, это зафиксировать тег img тегу void (и я включил ссылку на картинку собаки).

Вы непосредственно меняете элемент height/width, но вы также можете изменить атрибут стиля height/width.

Если есть другой код, влияющий на изображение или выпадающий список, тогда его также нужно посмотреть.

// original function 
 
function dogsize(option){ 
 
    if (option == "small"){ 
 
     document.getElementById('dogpicture').height = 50; // string "50" also works 
 
     document.getElementById('dogpicture').width = 50; 
 
    } 
 
    if (option == "default"){ 
 
     document.getElementById('dogpicture').height = 100; 
 
     document.getElementById('dogpicture').width = 100; 
 
    } 
 
    if (option == "big"){ 
 
     document.getElementById('dogpicture').height = 150; 
 
     document.getElementById('dogpicture').width = 150; 
 
    } 
 
} 
 

 
// alternate syntax that changes the style attribute properties 
 
function dogsizeStyleMutation(option){ 
 
    if (option == "small"){ 
 
     document.getElementById('dogpicture').style.height = "50px"; 
 
     document.getElementById('dogpicture').style.width = "50px"; 
 
    } 
 
    if (option == "default"){ 
 
     document.getElementById('dogpicture').style.height = "100px"; 
 
     document.getElementById('dogpicture').style.width = "100px"; 
 
    } 
 
    if (option == "big"){ 
 
     document.getElementById('dogpicture').style.height = "150px"; 
 
     document.getElementById('dogpicture').style.width = "150px"; 
 
    } 
 
}

<img id="dogpicture" src="https://www.what-dog.net/Images/faces2/scroll0015.jpg" alt="dog" height="150" width="150" /> 
 

 
<br/> 
 
<h3>Changes element height/width</h3> 
 

 
<select id="dogsize" name="sizeofdog" onchange="dogsize(this.value);"> 
 
    <option value="small"> small </option> 
 
    <option value="default" selected> default </option> 
 
    <option value="big"> big </option> 
 
</select> 
 

 
<br/> 
 
<h3>Changes element style attr height/width</h3> 
 

 
<select id="dogsizeStyle" name="sizeofdogInStyle" onchange="dogsizeStyleMutation(this.value);"> 
 
    <option value="small"> small </option> 
 
    <option value="default" selected> default </option> 
 
    <option value="big"> big </option> 
 
</select>