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

HTML

<p> Приклад використання атрибуту <code> height </code> </p>
<p id="text"> Поточна висота зображення: 100 </p>
<input type="range" id="range" min="0" max="500" step="1" name="range">
<input type="button" value="Встановити висоту" onclick="f()">
<hr>
<div class="block1" >
  <p> З використанням атрибуту <code> height </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="Зима" height="100"/>
</div>

<div class="block1" >
  <p> Без використання атрибуту <code> height </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 height = document.getElementById("range").value;
  var image = document.getElementById("image");
  image.setAttribute("height", height);
  text.innerHTML = "Поточна висота зображення " + height;
}
//# sourceURL=pen.js

HTML

<p class="cap">1. Без атрибутів — власний розмір картинки, 80×40</p>
<input type="image" alt="Надіслати" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='80'%20height='40'%3E%3Crect%20width='80'%20height='40'%20fill='%232f6fd0'/%3E%3Ccircle%20cx='40'%20cy='20'%20r='12'%20fill='%23ffffff'/%3E%3C/svg%3E">

<p class="cap">2. height="20" — ширину дораховано за пропорціями, вийшло 40×20</p>
<input type="image" height="20" alt="Надіслати" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='80'%20height='40'%3E%3Crect%20width='80'%20height='40'%20fill='%2372b043'/%3E%3Ccircle%20cx='40'%20cy='20'%20r='12'%20fill='%23ffffff'/%3E%3C/svg%3E">

<p class="cap">3. width="160" height="20" — обидва разом, пропорції зламано</p>
<input type="image" width="160" height="20" alt="Надіслати" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='80'%20height='40'%3E%3Crect%20width='80'%20height='40'%20fill='%23f2b134'/%3E%3Ccircle%20cx='40'%20cy='20'%20r='12'%20fill='%23ffffff'/%3E%3C/svg%3E">

<p class="cap">4. height="0" — між дужками кнопки немає взагалі, вона 0×0</p>
<p class="marks">[<input type="image" height="0" alt="Надіслати" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='80'%20height='40'%3E%3Crect%20width='80'%20height='40'%20fill='%23d64545'/%3E%3C/svg%3E">]</p>

<p class="cap">5. height="20%" — відсотки не діють, розмір лишився природним</p>
<input type="image" height="20%" alt="Надіслати" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='80'%20height='40'%3E%3Crect%20width='80'%20height='40'%20fill='%235a6472'/%3E%3C/svg%3E">

<p class="cap">6. Зламана адреса, але width і height на місці — коробка тримає розмір</p>
<input type="image" width="120" height="40" alt="Тут мав бути малюнок" src="nemaye-takogo-fajla.png">

<p class="cap">7. type="text" height="80" — атрибут не діє</p>
<input type="text" height="80" value="висота та сама">

<p class="cap">8. Те саме поле, збільшене стилями — так це роблять насправді</p>
<input type="text" class="tall" value="висота через padding і font-size">

CSS

.cap {
    margin: 20px 0 6px;
    max-width: 620px;
    color: #5a6472;
    font-size: .92em;
}

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

.marks {
    display: inline-block;
    padding: 8px 10px;
    background: #f6f9ff;
    border: 1px solid #b9c6d8;
    font-family: ui-monospace, monospace;
}

.marks input[type="image"] {
    display: inline-block;
    outline: 0;
}

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

.tall {
    padding: 14px 12px;
    font-size: 18px;
}