html - CSS 将图像规范化为 4 :3 from assorted ratios

Question

上图显示了当我用各种图像填充我的 bootstrap 图片库时发生的情况。 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="col-lg-3 col-md-3 col-sm-6"><img class="img-responsive img-thumbnail" src="http://placehold.it/1920x1080"></li>
    <li class="col-lg-3 col-md-3 col-sm-6"><img class="img-responsive img-thumbnail" src="http://placehold.it/800x600"></li>
    <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="col-lg-3 col-md-3 col-sm-6"><img class="img-responsive img-thumbnail" src="http://placehold.it/1920x1080"></li>
    <li class="col-lg-3 col-md-3 col-sm-6"><img class="img-responsive img-thumbnail" src="http://placehold.it/800x600"></li>
    <li class="col-lg-3 col-md-3 col-sm-6"><img class="img-responsive img-thumbnail" src="http://placehold.it/800x600"></li>
    <li class="col-lg-3 col-md-3 col-sm-6"><img class="img-responsive img-thumbnail" src="http://placehold.it/800x600"></li>
</ul>

有没有一种方法可以使图像标准化为 4:3，而无需对其进行预处理或使其无响应？

Answer 1

您可以使用百分比 padding 技巧设置元素的比例(相对于其容器的宽度)

因此您必须将 img 元素替换为 div 并将图像设置为背景。使用 background-size:cover 将缩放图像以填充其容器而不拉伸(stretch)。当然会发生一些裁剪*)

所以你的 html 变成了

<ul class="row">
  <li class="col-lg-3 col-md-3 col-sm-6">
    <div class="img-responsive img-thumbnail ratio-4-3" style="background-image:url('http://placehold.it/1920x1080')"></div>
  </li>
  <li class="col-lg-3 col-md-3 col-sm-6">
    <div class="img-responsive img-thumbnail ratio-4-3" style="background-image:url('http://placehold.it/1920x1080')"></div>
  </li>
  <li class="col-lg-3 col-md-3 col-sm-6">
    <div class="img-responsive img-thumbnail ratio-4-3" style="background-image:url('http://placehold.it/800x600')"></div>
  </li>
  <li class="col-lg-3 col-md-3 col-sm-6">
    <div class="img-responsive img-thumbnail ratio-4-3" style="background-image:url('http://placehold.it/1920x1080')"></div>
  </li>
  <li class="col-lg-3 col-md-3 col-sm-6">
    <div class="img-responsive img-thumbnail ratio-4-3" style="background-image:url('http://placehold.it/1920x1080')"></div>
  </li>
  <li class="col-lg-3 col-md-3 col-sm-6">
    <div class="img-responsive img-thumbnail ratio-4-3" style="background-image:url('http://placehold.it/800x600')"></div>
  </li>
  <li class="col-lg-3 col-md-3 col-sm-6">
    <div class="img-responsive img-thumbnail ratio-4-3" style="background-image:url('http://placehold.it/800x600')"></div>
  </li>
  <li class="col-lg-3 col-md-3 col-sm-6">
    <div class="img-responsive img-thumbnail ratio-4-3" style="background-image:url('http://placehold.it/800x600')"></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