Question

我正在尝试使用bootstrap创建一个响应式网格式图库，但问题是高度不同的图像。

我尝试了这个解决方案，但这会在缩放时拉伸图像，我希望保持纵横比相同。 [https://stackoverflow.com/a/34426344/8569875]

这是我的小提琴......和代码......

＆＃13;

.container {
  width: 100%;
  padding: 0;
  margin: 0;
}

ul {
  width: 100%;
  list-style: none;
  margin: 0;
  padding: 0;
}

img {
  padding 10px;
  max-width: 100%;
}

＆＃13;

<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>

＆＃13;

Answer 1

.container {
  width: 100%;
  padding: 0;
  margin: 0;
}

ul {
  width: 100%;
  list-style: none;
  margin: 0;
  padding: 0;
}
li{
  height: 200px;
  overflow: hidden;
  display: inline-block;
}
img {
  padding 10px;
  height: 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 2

你想要这样的东西吗？

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

请参阅以下链接了解我的解决方案！

JSFiddle Demo

<强> CSS：

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

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

相同高度的图像引导程序

2 个答案: