寬度：自動;身高：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

我在調整你的CSS使用object-fit 。像這樣：

你會注意到，如果你調節高度的小提琴輸出窗口（向上或向下），較低的圖像調整高度，在這兩個區塊也同樣：

圖片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