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

当浏览器窗口调整大小时，是否可以自动调整div及其内容的大小？我希望文字不要换行。我想调整图像和字体大小以具有相同的组成（或布局）。是否可以使用CSS来完成？谢谢马丁resize div及其在浏览器窗口上的内容调整大小

2010-04-29 Martin Pilch

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

来源

2010-04-30 22:26:02

问题解决！有必要调整宽度或高度。长宽比将改变另一个。现在我需要改变字体大小。我会报告我的成功。 – 2010-04-30 22:32:48

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

因此，对于一些浏览器，你可以使用：

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

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

更准确的说，你可以使用宽度：

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

这将绘制文本红色当窗口小于800像素宽。尝试调整大小this page以查看效果。

更准确地说需要javascript。

来源

2010-04-29 20:15:34 Joel

你可以使用jquery的resize方法。和u可以把这样的事情...

$(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 ......

来源

2010-04-29 21:12:43 Nitz

也许我可以改变内容大小（字体，图像大小...）使用JavaScript。当窗口调整大小时，我可以将内容元素相对（使用％）调整为以前的大小。我会尽力给予反馈谢谢 – 2010-04-30 15:06:15

我认为下面的解决办法是不断调整的对象是非常有用的 - 这仅仅是一个例子：

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/

来源

2016-03-12 12:21:33 lsblsb

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

回答

相关问题