宽度：自动;身高：100;和溢出：隐藏不能按预期工作

Question

我有两组图像，如下所示：

两个图像的代码完全相似。第一个块和第二个块中的图像之间的差异只是尺寸。

所以，我希望图像的所有块看起来完全相同的高度和宽度。不考虑图像的尺寸。我还希望图像的宽度应该是可用宽度的100％。并且图像的高度是自动的。将图像的高度设置为自动后如果图像的高度大于其父级的高度，则应该隐藏图像的部分。

这是我的HTML：

<div class="container-fluid">
<div class="row top-row">

    <div class="col-md-2">

        <div class="col-md-12 menu-top-wrapper">
            <img src="https://lorempixel.com/900/500?r=1" class="menu-top-img" />
        </div>
        <div class="col-md-6 menu-left-wrapper">
            <img src="https://lorempixel.com/900/500?r=2" class="menu-left-img" />            
        </div>
        <div class="col-md-6  menu-right-wrapper">
            <img src="https://lorempixel.com/900/500?r=3" class="menu-right-img" />          
        </div>

    </div>

    <div class="col-md-2">

        <div class="col-md-12 menu-top-wrapper">
            <img src="https://lorempixel.com/500/900?r=1" class="menu-top-img" />
        </div>
        <div class="col-md-6 menu-left-wrapper">
            <img src="https://lorempixel.com/500/900?r=2" class="menu-left-img" />            
        </div>
        <div class="col-md-6  menu-right-wrapper">
            <img src="https://lorempixel.com/500/900?r=3" class="menu-right-img" />          
        </div>

    </div>

</div>

</div>

这是我的css：

.menu-left-wrapper {
    margin-top: 2px;
    padding-right: 2px;
}

.menu-right-wrapper {
    margin-top: 2px;
    padding-left: 2px;
}

.menu-top-img {
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

.menu-left-img {
    border-bottom-left-radius: 10px;
}

.menu-right-img {
    border-bottom-right-radius: 10px;
}

.img-top-wrapper,
.img-left-wrapper,
.img-right-wrapper {
    position: relative;
    width: auto;
    height: 100px;
    overflow: hidden;
}

.menu-top-img,
.menu-left-img,
.menu-right-img {
    position: relative;
    width: 100%;
    height: auto;
}

这是JS小提琴：

https://jsfiddle.net/Vishal1419/s9e8x0pt/

Answer 1

我使用object-fit来调整你的CSS。像这样：

你会注意到，如果你调整小提琴输出窗口的高度（向上或向下），下面的图像调整高度，在两个块中均匀调整：

图片1：

图片2：

请参阅下面的小提琴和片段中的代码

.top-row {
  height: 100vh;
  max-width: 1024px;
  overflow: hidden!important;
}

.menu-left-wrapper {
  display: inline-block;
  margin-top: 2px;
  padding-right: 2px;
}

.menu-right-wrapper {
  display: inline-block;
  margin-top: 2px;
  padding-left: 2px;
}

.menu-top-img {
  display: inline-block;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

.img-top-wrapper {
  position: relative;
  max-width: 100%;
  height: 100px;
}

.img-left-wrapper,
.img-right-wrapper {
  position: relative;
  width: 100%;
  height: calc(33.5vh);
  object-fit: cover;
}

.menu-top-img {
  position: relative;
  width: 100%;
  height: 100px;
  object-fit: cover;
}

.menu-left-img,
.menu-right-img {
  position: relative;
  border-bottom-right-radius: 10px!important;
  border-bottom-left-radius: 10px!important;
  width: 100%;
  height: calc(33.5vh);
  object-fit: cover;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
  <div class="row top-row">

    <div class="col-md-2">

      <div class="col-md-12 menu-top-wrapper">
        <img src="https://lorempixel.com/900/500?r=1" class="menu-top-img" />
      </div>
      <div class="col-md-6 menu-left-wrapper">
        <img src="https://lorempixel.com/900/500?r=2" class="menu-left-img" />
      </div>
      <div class="col-md-6  menu-right-wrapper">
        <img src="https://lorempixel.com/900/500?r=3" class="menu-right-img" />
      </div>

    </div>

    <div class="col-md-2">

      <div class="col-md-12 menu-top-wrapper">
        <img src="https://lorempixel.com/500/900?r=1" class="menu-top-img" />
      </div>
      <div class="col-md-6 menu-left-wrapper">
        <img src="https://lorempixel.com/500/900?r=2" class="menu-left-img" />
      </div>
      <div class="col-md-6  menu-right-wrapper">
        <img src="https://lorempixel.com/500/900?r=3" class="menu-right-img" />
      </div>

    </div>

  </div>

</div>

(Updated) fiddle here