大佬教程收集整理的这篇文章主要介绍了css – 指定HTML元素的自然大小,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
我想要一个任意元素的确切行为.也就是说,我想创建一个< div>或其他具有自然大小(我将以像素指定)的其他东西,并在受max-width和max-height影响时保持其纵横比. (积分:如果技术也支持最小宽度和最小高度,则会很酷).
这里有一些我收集的信息:
>对于HTML5图像,您可以使用NaturalWidth和naturalHeight属性读取图像的自然大小,前提是完整属性为true.不幸的是,作为MDN points out,这些属性是只读的,并且是特定于图像元素的.
> This approach是辉煌的,但(尽管高度响应最大宽度)宽度不响应最大高度.
>有一点搜索未能找到一个只有CSS的解决方案,这使我觉得可能不存在.我还将接受JavaScript解决方案,但是它们需要对窗口大小和父元素大小的变化是稳健的.
HTML
<div class="ratioBox"> <div class="dummy"></div> <div class="el">This is the super duper ratio element </div> </div>
CSS
.ratioBox{ position: relative; overflow: hidden; /* to hide any content on the .el that might not fit in it */ width: 75%; /* percentage width */ max-width: 225px; min-width: 100px; max-height: 112.5px; min-height: 50px; } .dummy { padding-top: 50%; /* percentage height */ } .el { position: absolute; top: 0; bottom: 0; left: 0; right: 0; BACkground-color: silver; }
看到它在这里工作:http://jsfiddle.net/joplomacedo/7rAcH/
解释如果你不明白发生了什么,将在一天结束时到来,因为我不幸的是时间不够了. [这是7月28日下午2:54(GMT时间),因为我写这个]
以上是大佬教程为你收集整理的css – 指定HTML元素的自然大小全部内容,希望文章能够帮你解决css – 指定HTML元素的自然大小所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。