具有相同高度不同宽度的响应图像并排

Question

我的问题在图片中：

桌面分辨率示例：

在服务器中，我想使用默认尺寸的图片 (800x450px)。因此，我需要使用 css 调整图像大小和裁剪图像以适应容器 div's width 并保持行中所有图像的相同高度。然后在窗口调整大小图像必须保持纵横比。

HTML代码示例：

<div class="wrap">
<div class="container col-7">
    <img src="http://lorempixel.com/800/450/sports/1/" alt="">
    <h2>Title1</h2>
</div>
<div class="container col-5">
    <img src="http://lorempixel.com/800/450/sports/2/" alt="">
    <h2>Title2</h2>
</div>
<div class="container col-5">
    <img src="http://lorempixel.com/800/450/sports/3/" alt="">
    <h2>Title3</h2>
</div>
<div class="container col-4">
    <img src="http://lorempixel.com/800/450/sports/4/" alt="">
    <h2>Title4</h2>
</div>
<div class="container col-3">
    <img src="http://lorempixel.com/800/450/sports/5/" alt="">
    <h2>Title5</h2>
</div>

css 示例：

.wrap { 
    display: flex; 
    flex-direction: row; 
    flex-wrap: wrap;
}
.container { 
    display: flex; 
    flex-direction: column;
}
.container img { 
    width: 100%; 
    display: block; 
}

Answer 1

如果可能的话，一种简单的方法是将图像显示为 div 背景。然后您可以使用 css3 背景属性，例如

CSS：

div {
      background-image:url('image-url-here');
      background-repeat:no-repeat;
      background-size:cover;
      background-position: center; 
  }

例如，您的图像 div 可能类似于

HTML：

<div class="container col-7">
    <div id="id1" class="myImage"></div>
    <h2>Title1</h2>
</div>

CSS：

   .myImage {
              background-repeat:no-repeat;
              background-size:cover;
              background-position: center; 
              width: 100%;
              height: 450px;
            }

   #id1     {
              background-image:url('http://lorempixel.com/800/450/sports/1/');
            }