調整div及其在瀏覽器窗口上的內容大小調整大小

Question

是否可以在調整瀏覽器窗口大小時自動調整div及其內容的大小？ 我希望文字不要包裝。 我想調整圖像和字體大小以具有相同的組成（或布局）。 可以用CSS做到嗎？ 謝謝馬丁

Answer 1

CSS僅提供有限（半）事件，但是，您可以使用寬度或方向媒體查詢根據窗口寬度應用不同的樣式。

因此，對於某些瀏覽器，您可以使用：

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

當窗口寬度小於其高度時，將繪制所有文本紅色。

更准確地說，您可以使用寬度：

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

當窗口寬度小於800px時，會將文本繪制為紅色。 嘗試調整此頁面的大小以查看效果。

更准確地說需要javascript。

Answer 2

您可以使用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，那么你可以看看下面的鏈接， 窗口大小

但從我的角度來看你應該使用Jquery ......

Answer 3

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

Answer 4

我認為以下解決方案對於不斷調整對象的大小非常有用 - 這只是一個例子：

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/