0
TMDbのAPIを使用して、シリーズのシーズンポスターをダウンロードします。ドキュメントスタンドでは、すべてのポスター画像にaspect ratio of 1:1.5があります。しかし、いくつかの画像は大きくなります。ここでは、テスト中に見つけた例を示します。CSSで画像の縦横比を設定する
スペシャルポスターはシーズン1の画像よりも高画質です。左の画像のサイズは1000 x 1500ピクセルです。右側の画像のサイズは400×578ピクセルですが、400×600ピクセルでなければなりません。
私の質問は今、私は1のアスペクト比の依存画像の高さを変更することができSASSでのプロパティがあります：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以下で見つけることができます。代わりにimg要素の
$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>