调整 div 及其在浏览器窗口上的内容调整大小

Question

是否可以在调整浏览器窗口大小时自动调整 div 及其内容的大小？我希望文字不要换行。我想调整图像和字体大小以具有相同的构图（或布局）。是否可以使用 CSS 来做到这一点？谢谢马丁

Answer 1

我想相对于父 div 和窗口大小的比率更改图像大小。我使用了下面发布的代码。问题是，图像宽度调整正确，但高度除以 13，而不是我的情况下的 3.9。你能看到错误吗？谢谢

    var height = window.innerHeight;
    var width = window.innerWidth;

    var pic = document.getElementById('picture');
    var snimek = pic.childNodes[0];

    var heightRatio = snimek.clientHeight / height;
    var widthRatio = snimek.clientWidth / width;

    console.log(widthRatio +' x '+heightRatio);

    for(i = 0; i < snimek.childNodes.length; i ++)
    {
        if(snimek.childNodes[i].tagName == 'IMG') {

            if(widthRatio > 1 || heightRatio > 1) {
                console.log(snimek.childNodes[i].width + 'x' + snimek.childNodes[i].height);
                if(widthRatio > heightRatio)
                {
                    snimek.childNodes[i].width /= widthRatio;
                    snimek.childNodes[i].height /= widthRatio;
                }
                else
                {
                    snimek.childNodes[i].width /= heightRatio;
                    snimek.childNodes[i].height /= heightRatio;
                }
                console.log(snimek.childNodes[i].width + 'x' + snimek.childNodes[i].height);
            }
        }
    }