Существует ли свойство CSS, которое уменьшает элемент html, имеющий фиксированные размеры, когда размер окна меньше размера содержимого?
Другими словами, содержимое должно уменьшаться (и сохранять то же соотношение), чтобы соответствовать новому размеру окна, как это делает свойство object-fit: "contain" для замененных элементов.
На данный момент я написал этот JS-код, который делает то, что я ожидаю, но мне интересно, можно ли это сделать только в html/css?
Кроме того, предостережение этого подхода заключается в том, что вы можете необходимо учитывать поля и отступы при вычислениях.
const CONTENT_WIDTH = 700;
const setContentScale = () => {
const newScale = Math.min(window.innerWidth/ CONTENT_WIDTH, 1);
const element = document.getElementById("container");
if(element) {
element.style.scale = newScale;
}
}
setContentScale(); // setContentScale(); //
Подробнее здесь: https://stackoverflow.com/questions/790 ... t-contains
Существует ли свойство CSS, которое изменяет масштаб любого элемента, например, object-fit: «contains» на img? ⇐ CSS
-
- Похожие темы
- Ответы
- Просмотры
- Последнее сообщение