使用CSS

Question

我使用TMDb的API并下载系列的季节海报。在文档台上，每张海报图片都有aspect ratio of 1:1.5。但有些图像更大。这是我在测试时发现的一个例子。

您在下面的图片上看到特价海报比第1季的图像更高。左图片的尺寸为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

您可以使用img和div或background-image将background-size: 100%设置为您的尺寸，而不是background-size: cover元素。

如果您想保留img代码，可以查看clip规则。