html – CSS从各种比例将图像标准化为4：3

概述上图显示了当我用各种图像填充我的引导程序图库时会发生什么. html看起来像这样： <ul class="row"> <li class="col-lg-3 col-md-3 col-sm-6"><img class="img-responsive img-thumbnail" src="http://placehold.it/1920x1080"></li> <li class= 上图显示了当我用各种图像填充我的引导程序图库时会发生什么. HTML看起来像这样：

<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所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。