Search code examples
htmlcsssass

Set aspect ratio of image with CSS

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.

enter image description here

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

  • Instead of the img elements, you could use a div set to your size with a background-image and background-size: 100% or background-size: cover.

    If you want to keep the img tags, you could look into the clip rule.