Как пропорционально масштабировать изображения img

В HTML, если вы хотите изменить размер изображения, определенного элементом img, и масштабировать его пропорционально, не изменяя соотношение ширины и высоты, вы можете установить только одно из значений ширины и высоты в атрибутах элемента img, а не устанавливайте оба одновременно. Он может реализовать эффект пропорционального масштабирования изображений img. Ниже мы реализуем эти два метода на двух примерах.

Пример кода изображения img с пропорциональным масштабированием по ширине и онлайн-редактор

Чтобы сравнить размер исходного изображения, в следующем примере используются символы комментариев HTML для аннотации пропорционально масштабированного кода. После первого запуска первую строку кода можно удалить (удалить онлайн, потому что это онлайн-редактор). , затем удалите символы комментариев во второй строке кода, а затем запустите его еще раз, чтобы увидеть эффект равного масштабирования:

<img src='../../static/img/test.jpg'>
<!-- <img src='../../static/img/test.jpg' width="50%"> -->

Пример кода пропорционального масштабирования по высоте

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

<img src='../../static/img/test.jpg'>
<!-- <img src='../../static/img/test.jpg' height="50%"> -->

намекать：Как и в двух примерах выше,Установите ширину и высоту на 50% соответственно, чтобы пропорционально масштабировать изображение.,Но размер полученных изображений не обязательно будет одинаковым.

Другой метод пропорционального масштабирования

Конечно, также можно масштабировать изображение пропорционально, задав одновременно атрибуты ширины и высоты изображения img, но сначала необходимо вычислить соотношение ширины и высоты изображения, а затем масштабировать его пропорционально.

оригинальный：html Код для масштабирования изображений img до равных пропорций

Отказ от ответственности：Содержание предназначено только для справки,Правильность не гарантирована!