这个问题在这里已经有了答案:MaintaintheaspectratioofadivwithCSS(37个答案)Responsivelychangedivsizekeepingaspectratio[duplicate](5个答案)关闭7年前。是否可以给一个div一个宽度，它是窗口的百分比，高度是它当前宽度的一定百分比？因此，当您调整浏览器窗口大小时，div会调整大小，但会保持相同的纵横比。谢谢再见
这个问题在这里已经有了答案:MaintaintheaspectratioofadivwithCSS(37个答案)Responsivelychangedivsizekeepingaspectratio[duplicate](5个答案)关闭7年前。是否可以给一个div一个宽度，它是窗口的百分比，高度是它当前宽度的一定百分比？因此，当您调整浏览器窗口大小时，div会调整大小，但会保持相同的纵横比。谢谢再见
是否可以通过文档窗口的百分比来定义图像？它嵌套在几个div标签中，所以它会以某种方式定义它的height%引用窗口，而不是它的父标签。实际上，像这样... 最佳答案 您可以使用视口(viewport)的高度和宽度。例如，下面的类将使元素的大小为视口(viewport)的一半。.size{width:50vw;height:50vh;}jsFiddleDemo这是一个纯CSS3解决方案，但它有一些browsersupport问题。 关于html-将图像调整为html窗口的百分比，我们在St
是否可以通过文档窗口的百分比来定义图像？它嵌套在几个div标签中，所以它会以某种方式定义它的height%引用窗口，而不是它的父标签。实际上，像这样... 最佳答案 您可以使用视口(viewport)的高度和宽度。例如，下面的类将使元素的大小为视口(viewport)的一半。.size{width:50vw;height:50vh;}jsFiddleDemo这是一个纯CSS3解决方案，但它有一些browsersupport问题。 关于html-将图像调整为html窗口的百分比，我们在St
我在codepen上找到了以下内容并且非常喜欢这种效果。现在我正在尝试根据我的需要进行调整，但遇到了一些问题:每当用户向下滚动或调整屏幕大小时，图像就会表现得很奇怪(我无法用自己的话来描述它，请参阅jsfiddle了解我的意思)。我想这个问题可能与“背景附件:固定”属性有关。参见:.image{width:100%;height:100%;position:absolute;bottom:0;background:url("http://lorempixel.com/400/200/")fixedtopcenterno-repeat;background-clip:content-bo
我在codepen上找到了以下内容并且非常喜欢这种效果。现在我正在尝试根据我的需要进行调整，但遇到了一些问题:每当用户向下滚动或调整屏幕大小时，图像就会表现得很奇怪(我无法用自己的话来描述它，请参阅jsfiddle了解我的意思)。我想这个问题可能与“背景附件:固定”属性有关。参见:.image{width:100%;height:100%;position:absolute;bottom:0;background:url("http://lorempixel.com/400/200/")fixedtopcenterno-repeat;background-clip:content-bo
我正在尝试将下面的代码基本上转换为可缩放版本，我已经尝试使用vw和vh、%values等，但我似乎无法获得有效值的正确平衡。感谢您的帮助。此代码笔也可能有帮助:http://codepen.io/anon/pen/dPNgvP.arrow{position:relative;height:0px;width:0px;border-top:18pxsolid#dd1111;border-left:11pxsolidtransparent;border-right:11pxsolidtransparent;position:absolute;bottom:40px;left:57px;z-
我正在尝试将下面的代码基本上转换为可缩放版本，我已经尝试使用vw和vh、%values等，但我似乎无法获得有效值的正确平衡。感谢您的帮助。此代码笔也可能有帮助:http://codepen.io/anon/pen/dPNgvP.arrow{position:relative;height:0px;width:0px;border-top:18pxsolid#dd1111;border-left:11pxsolidtransparent;border-right:11pxsolidtransparent;position:absolute;bottom:40px;left:57px;z-
请看一下这个片段:table{background-color:yellow;box-shadow:inset001pxred;max-width:100%;/*Youwouldgetsimilarlystrangebehaviorwithcollapsingborders:*//*border-collapse:collapse;*/}td{background-color:lightgreen;box-shadow:inset001pxblue;max-width:100%;}.flex{max-width:100%;display:flex;flex:1;background-c
请看一下这个片段:table{background-color:yellow;box-shadow:inset001pxred;max-width:100%;/*Youwouldgetsimilarlystrangebehaviorwithcollapsingborders:*//*border-collapse:collapse;*/}td{background-color:lightgreen;box-shadow:inset001pxblue;max-width:100%;}.flex{max-width:100%;display:flex;flex:1;background-c
