图像为100vh但保持纵横比

时间:2016-10-08 10:43:42

标签: html css css3 sass

我有一张图片,我希望永远是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;
        }
    }
}

1 个答案:

答案 0 :(得分:3)

使用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>