图像与100vh，但保持长宽比

Question

我有一个图像，我想永远是100vw & 100vh无论屏幕分辨率或视图端口。不过，我想保留某种纵横比来避免图像的拉伸和倾斜。

这就是我到目前为止所能得到的与长宽比相配的工作，但并不总是100vh。我可以做到这一点，因此图像标记在视图端口外部负面溢出以保持图像质量并保持高度100vh。

<div class="hero-img"> 
    <div class="hero-wrapper"> 
     <div class="hero-imgs"></div> 
     <img src="myimg.png" alt="my hero img" /> 
    </div> 
</div> 

样式

.hero-img{ 
    display:table; 
    height:100vh; 
    .hero-wrapper{ 
     display:table-row; 
     .hero-imgs{ 
      display:table-cell; 
      vertical-align:middle; 
      text-align:center; 
     } 
     img{ 
     display:inline-block; 
     } 
    } 
} 

Answer 1

更新img规则与height: 100%;

.hero-img { 
 
    display: table; 
 
    height: 100vh; 
 
} 
 
.hero-img .hero-wrapper { 
 
    display: table-row; 
 
} 
 
.hero-img .hero-wrapper .hero-imgs { 
 
    display: table-cell; 
 
    vertical-align: middle; 
 
    text-align: center; 
 
} 
 
.hero-img .hero-wrapper img { 
 
    display: inline-block; 
 
    height: 100%; 
 
}

<div class="hero-img"> 
 
    <div class="hero-wrapper"> 
 
    <div class="hero-imgs"></div> 
 
    <img src="http://placehold.it/300x600" alt="my hero img" /> 
 
    </div> 
 
</div>

基于评论

更新，以与相对的比的图像

.hero-img { 
 
    display: table; 
 
    height: 100vh; 
 
} 
 
.hero-img .hero-wrapper { 
 
    display: table-row; 
 
} 
 
.hero-img .hero-wrapper .hero-imgs { 
 
    display: table-cell; 
 
    vertical-align: middle; 
 
    text-align: center; 
 
} 
 
.hero-img .hero-wrapper img { 
 
    display: inline-block; 
 
    height: 100%; 
 
}

<div class="hero-img"> 
 
    <div class="hero-wrapper"> 
 
    <div class="hero-imgs"></div> 
 
    <img src="http://placehold.it/600x300" alt="my hero img" /> 
 
    </div> 
 
</div>