user1910046 user1910046 - 2 months ago 11
Sass (Sass) Question

Image with 100vh but maintain aspect ratio

I have an image which I would like to always be

100vw
&
100vh
no matter the screen resolution or view port. However I would like to keep some sort of aspect ratio to avoid stretching and skewing of the image.

This is what I have come up with so far which works lovely with the aspect ration but isn't
100vh
at all times. Can I make it so the image tag overflows negatively outside of the view port to maintain the image quality and keep the height
100vh
.

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


Styles

.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

Update the img rule with 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>

Update based on a comment, with an image with the opposite ratio

.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>