Question

使用WordPress和高级自定义字段，用户可以在一个块中添加或删除最多10个图像。图像内嵌，必须保持一行。

用户提供各种宽度和高度的图像，我不能依赖它们仔细编辑它们。这些是客户徽标。

我的目标是列表中的所有图像都会自动调整大小，以便它们都适合容器但保持纵横比。

任何帮助？

目前标记和CSS：

.logo-list {
  background-color: white;
  padding: 20px;
  width: 95%;
  max-width: 1000px;
  margin: 0 auto;
  display: flex;
}

<div class="logo-list">
  <img class="logo-list-image" src="SOURCE" alt="">
  <img class="logo-list-image" src="SOURCE" alt="">
  <img class="logo-list-image" src="SOURCE" alt="">
  <img class="logo-list-image" src="SOURCE" alt="">
</div>

JSFiddle

Answer 1

仅向flex: 1添加.logo-list-image就足以在Firefox中实现预期的效果，但由于众所周知的 Flexbox布局问题，这在Chrome中无效缩放图像时。

因此，为了使其在Chrome以及Firefox中运行，如果您打算在<{1}}上使用width: 100%，则可以使用min-width: 0和align-items: center执行此操作em>父元素，但如果不这样做，则还必须包含height: 100%：

body {
  background-color: #ccc;
}

.logo-list {
  background-color: white;
  padding: 20px;
  max-width: 1000px;
  box-sizing: border-box;
  margin: 0 auto;
  display: flex;
  align-items: center; /* added */
}

.logo-list-image {
  width: 100%;
  /* height: 100%; include this if you don't plan to use align-items: center */ 
  min-width: 0;
}

<div class="logo-list">
  <img class="logo-list-image" src="https://files.brightside.me/files/news/part_3/35405/656455-4-1-650-a542d8629a-1482214208.jpg" alt="">
  <img class="logo-list-image" src="https://upload.wikimedia.org/wikipedia/commons/4/4c/Logo-Free.jpg" alt="">
  <img class="logo-list-image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQhlpW2mlogSQxSGZ1a6fPpJMgRA5u8dvuqLOaz9GD8f3DPH_TF2w" alt="">
  <img class="logo-list-image" src="https://files.brightside.me/files/news/part_3/35405/656455-4-1-650-a542d8629a-1482214208.jpg" alt="">
  <img class="logo-list-image" src="https://upload.wikimedia.org/wikipedia/commons/4/4c/Logo-Free.jpg" alt="">
  <img class="logo-list-image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQhlpW2mlogSQxSGZ1a6fPpJMgRA5u8dvuqLOaz9GD8f3DPH_TF2w" alt="">
</div>

Answer 2

尝试这样的事情

对于图像标签，如果您定义一侧，则调整另一侧的大小以保持纵横比。

＆＃13;

body {
  background-color: #ccc;
}

.logo-list {
    width:20%;
    display:flex;
    align-items: flex-start;
}
.logo-list img{
  width:100%;
  margin:auto;
}

＆＃13;

<div class="logo-list">
  <img class="logo-list-image" src="https://files.brightside.me/files/news/part_3/35405/656455-4-1-650-a542d8629a-1482214208.jpg" alt="">
  <img class="logo-list-image" src="https://upload.wikimedia.org/wikipedia/commons/4/4c/Logo-Free.jpg" alt="">
  <img class="logo-list-image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQhlpW2mlogSQxSGZ1a6fPpJMgRA5u8dvuqLOaz9GD8f3DPH_TF2w" alt="">
  <img class="logo-list-image" src="https://files.brightside.me/files/news/part_3/35405/656455-4-1-650-a542d8629a-1482214208.jpg" alt="">
  <img class="logo-list-image" src="https://upload.wikimedia.org/wikipedia/commons/4/4c/Logo-Free.jpg" alt="">
  <img class="logo-list-image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQhlpW2mlogSQxSGZ1a6fPpJMgRA5u8dvuqLOaz9GD8f3DPH_TF2w" alt="">
</div>

＆＃13;

Flexbox，使所有图像宽度相等，以适合列表

2 个答案: