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

Question

我的问题在图片中:

桌面分辨率示例:

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

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