响应图像并排，相同高度不同宽度

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 background-properties，例如

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/');
            }