CSS Image wird nicht angezeigt?

CSS:
.top-banner {
  width: 100%;
  height: auto;
  background-size: contain;
  background: url("../img/start.jpg") no-repeat;
}

HTML:
 <div class="top-banner"></div>

Das Bild soll responsive angezeigt werden. Es liegt an dem height: auto;

gebe ich zum Beispiel eine feste height von 400px, wird es wieder angezeigt, ist aber natürlich nicht responsiv.

Gibt es da eine andere Möglichkeit, ein Image anzuzeigen, welches mitskaliert?

Answer 1

[medmonk]

Das Bild soll responsive angezeigt werden. Es liegt an dem height: auto;

Wenn der <div> Container keinen Inhalt hat resp. keine weiteren Elemente enthält, fällt er in sich zusammen, sofern als Höhe keine Wert definiert wurde. Falls kein fixer Wert angegeben werden kann, wäre die Eigenschaft min-height eine Lösung.

HTML:

<!-- example 1 -->
<div class="banner">
</div>

<!-- example 2 -->
<div class="banner">
  <div class="banner__inner">
  </div>
</div>

CSS:

.banner {
  width: 100%;
  min-height: 5rem;
  background: url("../img/start.jpg") center no-repeat;
  background-size: cover;
}

.banner__inner {
 height: 10rem;
}

Sollte der <div> Container weitere Elemente beinhalten, die jedoch mehr Platz einnehmen, würde der <div> Container in Höhe entsprechend mitwachsen, wenn die 5rem überschritten werden. Das wäre oben im zweiten Beispiel der Fall.

LG medmonk

Answer 2

[Alfi1986]

Height Auto wird nicht funktionieren, da ja nicht definiert ist. Da muss, wie du schon geschrieben hast, ein fester Wert rein.

Ich würde da gar kein Container nutzen, denn das Bild ist ja schon ein Block. Versuch es mal hiermit:

img {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
-o-object-position: left;
object-position: left;
}