Set aspect ratio of image with SaSS

[HeinPauwelyn]

Weten jullie het antwoord op deze vraag? Set aspect ratio of image with SaSS. Heb er problemen mee

---

I use an API from TMDb and download the season posters of a series. On the documentation stand that every poster image has an aspect ratio of 1:1.5. But some images are bigger. Here is an example I've found while testing.

You see on image below that the specials poster is heigher then the image of season 1. The left picture has a size of 1000 x 1500 pixels. The right picture has a deviating size namely 400 x 578 pixels, but it must be 400 x 600 pixels.

My question is now is there a property in SaSS where I could change the height of an image dependent of the aspect ration of 1:1.5?

I've tried to add code below to my Sass code, but didn't solve the problem.

.seriescontainer {
  overflow: hidden;
  width: 100%;
  max-height: 150%;
  min-height: 150%;

  @media (min-width: $screen-sm) {
    width: 50%;
    max-height: 75%;
    min-height: 75%;
  }

  @media (min-width: $screen-md) {
    width: 33.333333333%;
    max-height: 4.99999999999%;
    min-height: 4.99999999999%;
  }

  @media (min-width: $screen-lg) {
    width: 25%;
    max-height: 17.5%;
    min-height: 17.5%;
  }
}

In my website, I use Angular 2, Typescript, SaSS and HTML. My code you can find on this Fiddle and below.

$font: 'Oswald', sans-serif;
$nav-color: #445878;
$button-color-default: #92CDCF;
$text-color: #EEEFF7;
$footer-color: #1C1D21;
$footer-header-margin: 30px;
$footer-size: 60px;
$body-color: #31353D;
$imagecontainer_content-backgroundcolor: rgba(0, 0, 0, 0.5);

// screen resoluties
$screen-xs: 567px;
$screen-sm: 768px;
$screen-md: 992px;
$screen-lg: 1200px;

.seriescontainer {
    padding: 0;
    overflow: hidden;
    float: left;
    position: relative;
    cursor: pointer;

    @media (min-width: $screen-sm) {
        width: 50%;
    }

    @media (min-width: $screen-md) {
        width: 33.333333333%;
    }

    @media (min-width: $screen-lg) {
        width: 25%;
    }

    .seriescontainer_wrapper img {
        width: 100%;
        height: 100%;
        transform: scale(1);
        transition: .3s ease-in-out;
        filter: blur(0);
        overflow: hidden;

        &:hover {
            transform: scale(1.1);
            opacity: 1;
        }
    }

    .seriescontainer_content {
        position: absolute;
        width: 100%;
        background-color: rgba(0, 0, 0, 0.5);
        bottom: 0px;

        h3,
        p {
            margin: 20px 5px;
            padding: 0;
        }

        h3 {
            font-size: 1.5em;
            text-align: center;
            text-transform: uppercase;
            width: 70%;
            float: left;
        }

        p {
            width: 20%;
            float: right;
            font-size: 1.5em;
            text-align: right;
            span {
                margin: 0 5px;
            }
        }
    }
}

<!-- Just a part of it -->
<section _ngcontent-pqi-18="" class="seriescontainer seriescontainer-big">
  <a _ngcontent-pqi-18="" class="seriescontainer_wrapper" ng-reflect-router-link="/series,3581" ng-reflect-href="/series/3581" href="/series/3581">
    <img _ngcontent-pqi-18="" class="image-responsive" ng-reflect-src="https://image.tmdb.org/t/p/original/lzN0CllVFXtGtSl15r59Kb52DdT.jpg" src="https://image.tmdb.org/t/p/original/lzN0CllVFXtGtSl15r59Kb52DdT.jpg" ng-reflect-alt="season0" alt="season0">
  </a>
  <div _ngcontent-pqi-18="" class="seriescontainer_content">
    <h3 _ngcontent-pqi-18="">Season 0</h3>
    <p _ngcontent-pqi-18="">
      <span _ngcontent-pqi-18="" class="glyphicon glyphicon-eye-open"></span>
    </p>
  </div>
</section>
<section _ngcontent-pqi-18="" class="seriescontainer seriescontainer-big">
  <a _ngcontent-pqi-18="" class="seriescontainer_wrapper" ng-reflect-router-link="/series,3582" ng-reflect-href="/series/3582" href="/series/3582">
    <img _ngcontent-pqi-18="" class="image-responsive" ng-reflect-src="https://image.tmdb.org/t/p/original/o6wvnWuUKW1g2bLs2gmI2ObMYJG.jpg" src="https://image.tmdb.org/t/p/original/o6wvnWuUKW1g2bLs2gmI2ObMYJG.jpg" ng-reflect-alt="season1" alt="season1">
  </a>
  <div _ngcontent-pqi-18="" class="seriescontainer_content">
    <h3 _ngcontent-pqi-18="">Season 1</h3>
    <p _ngcontent-pqi-18="">
      <span _ngcontent-pqi-18="" class="glyphicon glyphicon-eye-open"></span>
    </p>
  </div>
</section>

---

Antwoorden kan op Stack