使用CSS设置图像的长宽比

Question

我使用 TMDb 的 API 并下载系列的季海报。在文件架上，每张海报图像的长宽比为 1:1.5。但有些图像更大。这是我在测试时发现的一个例子。

您可以在下图中看到特价海报比第一季的图像高。左图的尺寸为 1000 x 1500 像素。右图的尺寸有偏差，即 400 x 578 像素，但它必须是 400 x 600 像素。

我现在的问题是 SaSS 中是否有一个属性，我可以根据 1:1.5 的纵横比更改图像的高度？

我尝试将下面的代码添加到我的 Sass 代码中，但没有解决问题。

.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%;
  }
}

在我的网站中，我使用 Angular 2、Typescript、SaSS 和 HTML。您可以在 this Fiddle 及下面找到我的代码。

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

Answer 1

因 openai 集成而删除