html 自动缩放div,动态调整div的css缩放以适应容器的大小

匿名用户

您可以有效地一步一步地缩小它，直到它适合容器。

这实际上是:对元素进行样式设置，使其自然溢出

一次降低5%

子元素小于其父元素时停止

nullfunction calcSize() {

// The elements we need to use and our current scale

var editor = document.getElementById("editor")

var tree = document.getElementById("tree")

var scale = 1;

// Reset the initial scale and style incase we are resizing the page

tree.classList.add("loading");

tree.style.transform = "scale(1)";

// Loop until the scale is small enough to fit it's container

while (

(editor.getBoundingClientRect().width <

tree.getBoundingClientRect().width) &&

(scale > 0) // This is just incase even at 0.05 scale it doesn't fit, at which point this would cause an infinate loop if we didn't have this check

) {

html 自动缩放div,动态调整div的css缩放以适应容器的大小相关推荐

动态调整div大小 html,如何动态的根据用户屏幕的分辨率改变div的大小？
我想设计一个 app 产品主页,主页分 3 屏,要求网页会根据用户设备的分辨率自动调整每一屏的大小,例如我现在的 1366*768 则每屏显示 1366*768:如果另外有用户的分辨率是 1280*7 ...
JS动态添加div，然后在div中添加元素
先是放一个空的div,让后根据指标的数据,动态的往div中添加元素. <div id="DvelopmentTarget"> </div> 动态往div中添 ...
react根据浏览器的尺寸动态调整布局
react根据浏览器的尺寸动态调整div react实现关键代码 // 设置状态 state = {deskDivWidth:800px;deskHeight: document.body.clien ...
html自动创建div,Javascript实现动态创建DIV步骤
本文向大家描述一下如何使用Javascript动态创建DIV,首先看一下原来的CSS样式,然后动态创建DIV, 把DIV元素增加到HTML里面,相信本文介绍你会学到很多. Javascript动态创建 ...
实现div可以调整高度（div实现resize）
实现div可以调整高度(div实现resize) 一.div 实现resize(类似textarea) 代码如下: <!DOCTYPE html> <html><head ...
根据F12在页面中调整div的大小
我们先随便写一个div大小,然后在chrome浏览器打开,显示效果: #logo{border: 1px solid black;width: 1300px;height: 50px;} .top{b ...
关于动态生成div的认识
因为之前做了个关于仪表的小demo,用到了动态生成div的方法. 例子:一个事件触发一函数,函数的功能是在body里面生成一个DIV,并在DIV里面追加一个img标签.当然其中可以添加div和img ...
jquery动态改变div宽度和高度
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
公益图书馆-学习笔记五-jquery来动态设置div高度
使用jquery来设置html元素的显示与隐藏属性,同时调整div的高度注意1:jquery无法获取图片高度!因为jquery是在网页框架加载完就立即执行,此时网页里的图片还没有加载,被jquery ...

html 自动缩放div,动态调整div的css缩放以适应容器的大小

html 自动缩放div,动态调整div的css缩放以适应容器的大小相关推荐

最新文章

热门文章