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

[英]resize div and its content on browser window resize


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及其內容的大小?我想要文本不要包裝。我想要調整圖像和字體大小以擁有相同的組合(或布局)。是否可以使用CSS來實現它?謝謝馬丁

4 个解决方案

#1


3  

CSS provides only limited (semi-)events, however, you may be able to use the width or orientation media queries to apply different styles based on the width of the window.

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

Thus, for some browsers, you can use:

因此,對於某些瀏覽器,您可以使用:

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

Which will paint all the text red when the window width is less than its height.

當窗口寬度小於其高度時,將所有文本塗成紅色。

More accurately, you can use width:

更准確地說,你可以使用寬度:

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

Which will paint the text red when the window is less than 800px wide. Try resizing this page to see the effect.

當窗口寬度小於800px時,會將文本塗成紅色。嘗試調整頁面大小以查看效果。

To be more precise requires javascript.

更准確地說,需要javascript。

#2


1  

You can use the jquery's resize method. and u can put something like this...

您可以使用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");
});

so u can add change font size or any image height or anything... and if u don't want to use jquery then u can check out the link below, WINDOW SIZE

你可以添加改變字體大小或者任何圖像高度等等。如果你不想使用jquery,你可以查看下面的鏈接,窗口大小

but from my point of view u should use Jquery......

但從我的觀點來看,你應該使用Jquery……

#3


0  

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

我想改變圖像大小相對於父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);
            }
        }
    }

#4


0  

I think the following solution is very useful for resizing objects constantly - this is just one example:

我認為下面的解決方案對於不斷調整對象非常有用——這只是一個例子:

CSS:

CSS:

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

HTML:

HTML:

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

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

小提琴:https://jsfiddle.net/uxj77rg1/


注意!

本站翻译的文章,版权归属于本站,未经许可禁止转摘,转摘请注明本文地址:https://www.itdaan.com/blog/2010/04/29/725f0d99826dc739993ebadae724bf34.html



 
粤ICP备14056181号  © 2014-2021 ITdaan.com