html - 相同高度的图像 Bootstrap

Question

我正在尝试使用 bootstrap 制作响应式网格状画廊，但问题是不同高度的图像。

我试过这个解决方案，但这会在缩放时拉伸(stretch)图像，我想保持纵横比不变。 [ https://stackoverflow.com/a/34426344/8569875]

这是我的 fiddle ……和代码……

.container {
  width: 100%;
  padding: 0;
  margin: 0;
}

ul {
  width: 100%;
  list-style: none;
  margin: 0;
  padding: 0;
}

img {
  padding 10px;
  max-width: 100%;
}

<div class="container">
  <ul>
    <li class="col-xs-4 col-sm-6 col-xs-12"><img src="https://i.ytimg.com/vi/SfLV8hD7zX4/maxresdefault.jpg"></li>
    <li class="col-xs-4 col-sm-6 col-xs-12"><img src="https://www.rd.com/wp-content/uploads/sites/2/2016/04/01-cat-wants-to-tell-you-laptop.jpg"></li>
    <li class="col-xs-4 col-sm-6 col-xs-12"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/51/Mandarin.duck.arp.jpg/220px-Mandarin.duck.arp.jpg"></li>
  </ul>

</div>

Answer 1

你想要这样的东西吗？

我建议您使用媒体查询根据屏幕宽度设置 li 标签的高度，以处理不同尺寸的屏幕。

我的解决方案请引用以下链接!

JSFiddle Demo

CSS:

ul>li{
  height:200px;
  text-align:center;
  padding:5px;
}

img {
  padding 10px;
  max-width: 100%;
  height:100%;
  width:auto;
}