Ich benutze eine API von TMDb und lade die Poster der Serie herunter. Auf dem Dokumentationsstand steht, dass jedes Plakatbild eine aspect ratio of 1:1.5 hat. Aber einige Bilder sind größer. Hier ist ein Beispiel, das ich beim Testen gefunden habe.Bildformat mit CSS einstellen
Sie sehen auf dem Bild unten, dass die Specials Poster höher als das Bild der ersten Staffel ist. Das linke Bild hat eine Größe von 1000 x 1500 Pixel. Das rechte Bild hat eine abweichende Größe, nämlich 400 x 578 Pixel, muss aber 400 x 600 Pixel groß sein.
Meine Frage ist jetzt gibt es eine Eigenschaft in SaSS, wo ich die Höhe eines Bildes von 1 abhängig von dem Seitenverhältnis ändern könnte: 1.5?
Ich habe versucht, Code unten zu meinem Sass-Code hinzuzufügen, aber das Problem nicht gelöst.
.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%;
}
}
In meiner Website verwende ich Angular 2, Typescript, SaSS und HTML. Mein Code finden Sie unter this Fiddle und darunter.
$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>