Атрибут width тега <input> — ширина кнопки-зображення

HTML

<p> Приклад використання атрибуту <code> width </code> </p>
<p id="text"> Поточна ширина зображення: 100 </p>
<input type="range" id="range" min="0" max="300" step="1" name="range">
<input type="button" value="Встановити ширину" onclick="f()">
<hr>
<div class="block1" >
  <p> З використанням атрибуту <code> width </code> </p>
    <input id="image" type="image" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 40 40' preserveAspectRatio='none'%3E%3Crect width='40' height='40' fill='%23264653'/%3E%3Cpath d='M0 40 12 18 22 30 30 22 40 40Z' fill='%232a9d8f'/%3E%3Ccircle cx='30' cy='9' r='5' fill='%23e9c46a'/%3E%3C/svg%3E" alt="Зима" width="100"/>
</div>

<div class="block1" >
  <p> Без використання атрибуту <code> width </code> </p>
    <input  type="image" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 40 40' preserveAspectRatio='none'%3E%3Crect width='40' height='40' fill='%23264653'/%3E%3Cpath d='M0 40 12 18 22 30 30 22 40 40Z' fill='%232a9d8f'/%3E%3Ccircle cx='30' cy='9' r='5' fill='%23e9c46a'/%3E%3C/svg%3E" alt="Зима"/>
</div>

CSS

*{
  text-align:center;
}
.block1{
  float:left;
  width:50%;
}

JS

function f() {
  var width = document.getElementById("range").value;
  var image = document.getElementById("image");
  image.setAttribute("width", width);
  text.innerHTML = "Поточна ширина зображення " + width;
}
//# sourceURL=pen.js

HTML

<p><label for="a">type="text" width="300" — атрибут не діє</label></p>
<input id="a" type="text" width="300" value="width=300">

<p><label for="b">type="text" без нічого — та сама ширина</label></p>
<input id="b" type="text" value="без атрибутів">

<p><label for="c">size="40" — рахує символи, а не пікселі</label></p>
<input id="c" type="text" size="40" value="size=40">

<p><label for="d">width: 100% у стилях — те, чого зазвичай і хочуть</label></p>
<input id="d" class="wide" type="text" value="ширину задано правилом">

<p class="head">type="image" — єдиний тип, де width працює</p>

<p>Картинка 400×100 із width="120":</p>
<input type="image" width="120" alt="Надіслати заявку"
       src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='400'%20height='100'%3E%3Crect%20width='400'%20height='100'%20fill='%232f6fd0'/%3E%3Ccircle%20cx='200'%20cy='50'%20r='26'%20fill='%23ffffff'/%3E%3C/svg%3E">

<p>та сама картинка без width — власні 400×100:</p>
<input type="image" alt="Надіслати заявку"
       src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='400'%20height='100'%3E%3Crect%20width='400'%20height='100'%20fill='%2372b043'/%3E%3Ccircle%20cx='200'%20cy='50'%20r='26'%20fill='%23ffffff'/%3E%3C/svg%3E">

<p>зламана адреса — від кнопки лишився текст alt:</p>
<input type="image" width="120" alt="Надіслати заявку" src="zlamana-adresa.png">

CSS

p {
    margin: 16px 0 4px;
    max-width: 560px;
}

.head {
    margin: 26px 0 8px;
    color: #5a6472;
    font: 600 14px/1.4 system-ui, sans-serif;
    text-transform: uppercase;
    letter-spacing: .04em;
}

label {
    font-weight: 600;
}

input[type="text"] {
    padding: 6px 8px;
    font: 15px/1.4 ui-monospace, monospace;
    border: 2px solid #b9c6d8;
    border-radius: 4px;
}

.wide {
    width: 100%;
    max-width: 560px;
}

input[type="image"] {
    display: block;
    outline: 2px dashed #d64545;
    outline-offset: 2px;
}