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

时间:2010-04-29 20:06:05

标签: css html

是否可以在调整浏览器窗口大小时自动调整div及其内容的大小? 我希望文字不要包装。我想调整图像和字体大小以具有相同的组成(或布局)。 可以用CSS做到吗? 谢谢 马丁

4 个答案:

答案 0 :(得分:3)

CSS仅提供有限的(半)事件,但是,您可以使用宽度或方向媒体查询根据窗口的宽度应用不同的样式。

因此,对于某些浏览器,您可以使用:

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

当窗口宽度小于其高度时,会将所有文本绘制成红色。

更准确地说,您可以使用宽度:

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

当窗口宽度小于800px时,会将文本绘制为红色。请尝试调整this page的大小以查看效果。

更确切地说,需要javascript。

答案 1 :(得分:1)

您可以使用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,那么你可以查看下面的链接, WINDOW SIZE

但从我的观点来看,你应该使用Jquery ......

答案 2 :(得分:0)

我想要相对于父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);
            }
        }
    }

答案 3 :(得分:0)

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

CSS:

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

HTML:

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

FIDDLE:https://jsfiddle.net/uxj77rg1/