Question

我有一张图片，我希望永远是100vw＆amp; 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>

图像为100vh但保持纵横比

1 个答案: