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

调整浏览器窗口大小时，是否可以自动调整div及其内容的大小？ 我希望文本不要换行。我想调整图像和字体大小，使其具有相同的构图（或布局）。 有可能使用CSS来实现吗？ 谢谢 Martin

CSS只提供有限的（半）事件，但是，您可以使用宽度或方向媒体查询根据窗口的宽度应用不同的样式

因此，对于某些浏览器，您可以使用：

@media all and (orientation:portrait) {
    body { color: red; }
}

当窗口宽度小于其高度时，将所有文本绘制为红色

更准确地说，您可以使用宽度：

@media all and (max-width:800px) {
    body { color: red; }
}

当窗口宽度小于800px时，它会将文本涂成红色。尝试调整大小以查看效果

---

更准确地说，需要javascript。

您可以使用jquery的resize方法。 你可以这样写…

$(window).resize(function() {
     if($(window).width() == 800)  // u can choose the size of the window also.
            $("any particular div").css("font-size":"14px");
});

因此，你可以添加更改字体大小或任何图像高度或任何东西。。。 如果你不想使用jquery，你可以查看下面的链接，

---

但从我的观点来看，你应该使用……

我想改变图像大小相对于父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);
            }
        }
    }

var height=window.innerHeight；
变量宽度=window.innerWidth；
var pic=document.getElementById（'picture'）；
var snimek=pic.childNodes[0]；
变量高度比=snimek.clientHeight/高度；
var-widthRatio=snimek.clientWidth/width；
控制台.对数（宽比+x'+高比）；
对于（i=0；i1）{
log（snimek.childNodes[i].width+'x'+snimek.childNodes[i].height）；
如果（宽度比>高度比）
{
snimek.childNodes[i].width/=widthRatio；
snimek.childNodes[i].高度/=宽度比；
}
其他的
{
snimek.childNodes[i].宽度/=高度比；
snimek.childNodes[i].高度/=高度比；
}
log（snimek.childNodes[i].width+'x'+snimek.childNodes[i].height）；
}
}
}

我认为以下解决方案对于不断调整对象大小非常有用-这只是一个示例：

CSS:

HTML:

调整容器大小以调整我的大小！

---

FIDDLE:

也许我可以使用javascript更改内容大小（字体、图像大小…）。调整窗口大小时，我可以将内容元素的大小相对（使用%）调整为以前的大小。我将尝试给予反馈，谢谢问题解决！只需调整宽度或高度。纵横比将改变另一个。现在我需要更改字体大小。我将报告我的成功。

.scale
{
    font-size: calc(1vw + 1vh);
    width: calc(10vw + 10vh);
    height: calc(5vw + 5vh);
    padding: calc(1vw + 1vh);
    background-color: yellow;
}

<div class="scale">
Resize container to resize me!
</div>