<ul > <li ><img src="http://placehold.it/1920x1080"></li> <li ><img src="http://placehold.it/1920x1080"></li> <li ><img src="http://placehold.it/800x600"></li> <li ><img src="http://placehold.it/1920x1080"></li> <li ><img src="http://placehold.it/1920x1080"></li> <li ><img src="http://placehold.it/800x600"></li> <li ><img src="http://placehold.it/800x600"></li> <li ><img src="http://placehold.it/800x600"></li></ul>
有没有办法让图像标准化为4:3而无需预处理或使它们无响应?
解决方法 您可以使用百分比填充技巧(相对于其容器的宽度)设置元素的比例因此,您必须使用div替换img元素并将图像设置为背景.使用背景大小:封面将缩放图像以填充其容器而不拉伸.当然会发生一些种植*)
所以你的HTML变成了
<ul > <li > <div ></div> </li> <li > <div ></div> </li> <li > <div ></div> </li> <li > <div ></div> </li> <li > <div ></div> </li> <li > <div ></div> </li> <li > <div ></div> </li> <li > <div ></div> </li></ul>
和你的CSS
/* CSS used here will be applIEd after bootstrap.CSS */ul{ List-style:none; margin:0; padding:0;}.ratio-4-3{ wIDth:100%; position:relative; background:url() 50% 50% no-repeat; background-size:cover; background-clip:content-Box;}.ratio-4-3:before{ display:block; content:""; padding-top:75%;}
演示于http://www.bootply.com/gpetrioli/thU89Ryoer
总结以上是内存溢出为你收集整理的html – CSS从各种比例将图像标准化为4:3全部内容,希望文章能够帮你解决html – CSS从各种比例将图像标准化为4:3所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错,欢迎将内存溢出网站推荐给程序员好友。
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)