宽度：自动；高度：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 Fiddle:

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

Answer 1

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

您会注意到，如果您调整 fiddle 输出 window 的高度（向上或向下），则较低的图像在高度上调整大小相同，在两个块中：

图片 1：

图 2：

请参阅 fiddle 中的代码和下面的代码段

.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

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

width: auto; height: 100; and overflow: hidden does not work as expected

html

css

ng-bootstrap