Да, есть способ сохранить соотношение сторон изображения и изменить его размер на часть его исходного размера. Однако CSS не может знать встроенный размер c ( исходный размер ) изображения. Следовательно, вы можете сделать только две вещи:
- Скажите CSS явно размер оригинала
- Используйте JS, чтобы получить размер оригинала при загрузке изображения
Что не работает
Использование процентного значения в качестве width значения для img не работает просто потому, что процентное значение разрешает, ну, в процентах, его размер контейнера , а не его исходный размер . Ниже я продемонстрировал нерабочие примеры.
При этом я лично обычно хочу явно указать ширину изображения. Например, на больших устройствах я хочу, чтобы изображение было 1080px. На меньших устройствах я хочу, чтобы изображение было 560 пикселей. Я могу просто создать контейнер для изображения явного размера, поместить изображение внутри контейнера и указать ширину изображения до 100% (от размера контейнера).
Что работает
Как уже упоминалось, есть два способа сделать изображение на 50% его первоначальной ширины. Сначала с помощью JS. Во-вторых, скажите CSS явно исходную ширину изображения.
- Используя подход JS, вам просто нужно изменить ширину изображения. При загрузке получите внутреннюю c ширину изображения, затем установите новую ширину равной внутренней c ширине, деленной на 2. Простая.
- Использование говорящего - CSS - явный подход меньше выгодно. Это решение предполагает, что изображение всегда будет одним и тем же, и вам, разработчику, нужно заранее знать размер исходного изображения. При изменении исходного размера изображения вам также потребуется обновить код. При этом вы можете добиться этого, указав CSS пользовательское свойство внутри класса CSS, указав атрибут (в HTML), который дает ширину intrinsi c, а затем attr () (все еще экспериментальный и в основном не поддерживается) или с использованием атрибута
intrinsicsize и установите значения от width и style до CSS (все еще экспериментальный и не поддерживается) , Последние два решения, как уже упоминалось, не поддерживаются большинством браузеров и могут пока не работать должным образом.
На мой взгляд, ваш лучший выбор для установки изображения ширина до 50% его внутренняя c ширина с помощью JS. Вот решение, демонстрирующее решения «что не работает» и решение JS. Соотношение сторон поддерживается автоматически, если вы измените только один из размеров изображения (ширина / высота).
const imageJS = document.querySelector('.image--changed-with-js')
imageJS.onload = () => {
const intrinsicWidth = imageJS.width
imageJS.width = imageJS.width / 2
}
* {
box-sizing: border-box;
}
body,
html {
margin: 0px;
}
img {
margin: 20px 0;
}
/* Image has its intrinsic size (i.e. the original image size) */
.image--original {
width: auto;
}
/* Image contained within a 500px container
Image has a width of 50% of 500px = 250px */
.container {
width: 500px;
}
.image--changed-with-container {
width: 50%;
}
/* Image is not contained within a div
However, image is inside body
<body> is its container
It now has a width of 50% of the body
NOT 50% of its intrinsic width */
.image--changed-without-container {
width: 50%;
}
/* Image changed using JS
You can get the intrinsic size through JS and modify its size there */
.image--changed-with-js {}
<img class="image--original" src="https://img.freepik.com/free-vector/abstract-galaxy-background_1199-247.jpg?size=626&ext=jpg">
<div class="container">
<img class="image--changed-with-container" src="https://img.freepik.com/free-vector/abstract-galaxy-background_1199-247.jpg?size=626&ext=jpg">
</div>
<img class="image--changed-without-container" src="https://img.freepik.com/free-vector/abstract-galaxy-background_1199-247.jpg?size=626&ext=jpg">
<img class="image--changed-with-js" src="https://img.freepik.com/free-vector/abstract-galaxy-background_1199-247.jpg?size=626&ext=jpg">