Почему в элементе <img>сохраняется соотношение высоты и ширины?

Question

Если я просто напишу простой код вроде этого:

<img src="mycat.jpg" height="300px";>

Теперь, если изображение очень большое, высота уменьшится до 300 пикселей, и автоматически уменьшится ширина, чтобы соответствовать рост размер. Это почему? Я подумал, что если ширина не указана, она остается на «авто», что означает, что ширина элемента подстраивается под ширину содержимого, в данном случае ширину исходного размера изображения. Когда я меняю высоту элемента, высота изображения тоже изменяется, чтобы соответствовать размеру элемента, но почему ширина тоже меняется? Это должно быть потому, что соотношение фиксировано. Так ли это?

Да, я знаю, что если я установлю ширину на 100%, изображение расширится, чтобы заполнить всю ширину блока элемента, но почему, если он установлен на авто, он настраивается на высоту элемента, а не оставаться с исходным размером изображения, поскольку ширина элемента не была изменена?

Кроме того, существует ли реальный способ изменить размер содержимого, то есть самого изображения, а не изменять размер элемента, который содержит изображение? Я мог бы использовать display: flex и изменить пространство между элементом и изображением, так есть ли способ настроить таргетинг только на изображение, а не на весь элемент?

Answer 1

изображение масштабируется по умолчанию, когда вы пытаетесь задать ему высоту, но не ширину, чтобы сохранить его внешний вид, предположим, что изображение имеет 2160 пикселей в высоту и 3840 пикселей в ширину и вы измените его на ширину 300 пикселей , только это повлияет на высоту и сделает высоту 168 пикселей и для большего понимания попробуйте изменить размер изображения в краске, где начальный масштаб будет выглядеть следующим образом

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