Html 使用CSS设置图像的纵横比

我使用TMDb的API下载了一系列的季节海报。在文件架上，每个海报图像都有一个标签。但有些图像更大。下面是我在测试时发现的一个示例

你可以在下面的图片上看到，特价海报比第一季的图片更高。左侧图片的大小为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%;
  }
}

在我的网站中，我使用Angular2、Typescript、SaSS和HTML。我的代码你可以在和下面找到

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

第0季

第一季

代替img元素，您可以使用div设置为您的大小，背景图像和背景大小：100%或背景大小：封面

如果您想保留img标签，可以查看剪辑规则