调整大小div和其内容在浏览器窗口调整大小 [英] resize div and its content on browser window resize

问题描述

是否可以在调整浏览器窗口时自动调整div及其内容的大小？
我想要文本不包装。我想调整图像和字体大小具有相同的组成（或布局）。
是否可以使用CSS？
感谢
Martin

is it possible to automatically resize div and its content when browser window is resized? i want text not to wrap. i want to adjust image and font size to have the same composition (or layout). is it possible to do it using CSS? thanks Martin

推荐答案

我想改变图像大小相对于父div和窗口的比例尺寸。我已经使用代码贴在下面。问题是，图像宽度正确调整大小，但高度偏离13而不是我的情况下的3.9。你能看到错误吗？感谢

I have wanted to change image size relatively to ratio of parent div and window size. I have used code posted below. The problem is, the image width is resize correctly but height is devided by 13 instead of 3.9 in my case. can you see the error? thanks

    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);
            }
        }
    }

这篇关于调整大小div和其内容在浏览器窗口调整大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！