設置圖像與CSS的高寬比

我使用TMDb的API並下載系列的季節海報。在文檔上，每個海報圖片都有aspect ratio of 1:1.5。但有些圖像更大。這是我在測試時找到的一個例子。設置圖像與CSS的高寬比

您可以在下面的圖片中看到特輯海報更高，然後是第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>

來源

2017-01-22 H. Pauwelyn

取而代之的是img元素，你可以使用一個div設置爲你的尺寸與background-image和background-size: 100%或background-size: cover。

如果您想保留img標籤，您可以查看clip規則。

來源

2017-01-23 08:50:34 Louis

設置圖像與CSS的高寬比

回答

相關問題