動態改變aspect ratio通常涉及到調整視頻或圖像的寬高比例,以適應不同的顯示設備或屏幕尺寸。以下是一些常用的技巧:
.container {
aspect-ratio: 16/9;
}
@media screen and (max-width: 600px) {
.container {
aspect-ratio: 4/3;
}
}
window.addEventListener('resize', function() {
var container = document.querySelector('.container');
var aspectRatio = window.innerWidth / window.innerHeight;
if (aspectRatio > 1.5) {
container.style.width = '80%';
container.style.height = container.offsetWidth / 16 * 9 + 'px';
} else {
container.style.height = '80%';
container.style.width = container.offsetHeight / 9 * 16 + 'px';
}
});
無論使用哪種方法,都可以根據需要動態改變元素的寬高比例,以確保內容在不同的設備和屏幕上都能夠正確顯示。