大佬教程收集整理的这篇文章主要介绍了HTML – 按比例缩小类似于响应式图像的DIV?,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
img { max-width: 100%; height: auto; }
是否可以使用div(或一系列嵌套的div)而不是一个行为与响应图像相同的图像?您需要定义宽度为1000px且高度为200px的div,但随着容器宽度的缩小,它会按比例收缩.
从本质上讲,是否有可能做出这样的事情:
http://codepen.io/jakobud/pen/jEKVRZ
表现得像这样:
http://codepen.io/jakobud/pen/MYXbZB
这有可能吗?如果没有,为什么?你显然不能添加height:auto到div.two,因为这会覆盖DIV定义的高度.
我考虑过这种方法的一个解决方法是创建一个1000×200完全透明的PNG,您可以将其置于容器中,这将产生所需的结果,但这是一个完全黑客攻击.好像你应该能够用CSS做到但我不确定如何.
此外,我正在寻找一个不需要jQuery的解决方案.
我要求这样做的原因有时候设计师已经要求这样的东西,其中有一个容器,其大小具有一定的宽高比,但没有使用背景图像.在某些情况下,设计师想要使用CSS渐变作为背景,所以我不能只使用< img>这是容器的纵横比.显然,我不能依赖于内容(a< h1>或其他东西)来指示容器形状/纵横比.
.one { position: relative; padding-bottom: 20%; /* 1000:200 */ height: 0; } .two { width: 1000px; height: 200px; BACkground: #999; color: #FFF; text-align: center; font-family: sans-serif; max-width: 100%; position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
更新的codepen:http://codepen.io/sdsanders/pen/zxaNGQ
以上是大佬教程为你收集整理的HTML – 按比例缩小类似于响应式图像的DIV?全部内容,希望文章能够帮你解决HTML – 按比例缩小类似于响应式图像的DIV?所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。