Bilder per CSS anpassen

[tx_g]

Hallo,
ich habe gerade vor mir so ein kleine Übersicht mir zu bauen für meine Webseite.
Da habe ich mich ein wenig umgeschaut was evtl so am nähsten dran kommt was ich gern hätte und da ist mir das in den Sinn gekommen:
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_image_transparent_bottom

Jetzt ist mir das ganze allerdings doch stark zu groß, ich brauche das nur in 16% / 25%. Kein Problem dachte ich, Container Größe angepasst. Nun ist das ganze leider mit Sicherheit nicht höher als breit geworden http://prntscr.com/i3ftui
Wie komme ich also da hin?

Das zweite Problem ist, das entweder das Bild das Format bei behält oder es nicht gut aussieht. Kann man es nicht so machen das nur der Teil des Bildes dargestellt wird der in das Div passt? Also das dass ganze in etwa so funktioniert http://prntscr.com/i3fv3g

Vielen Dank

 

[michi174]

Du kannst der .container .content Klasse beispielsweise mit max-height eine Höhe zuweisen.

Zum Bild: https://www.w3schools.com/css/css_rwd_images.asp

 

[FranzvonAssisi]

Oder das ganze als background image und dann kannst du einstellen, wie das Bild das div abdecken soll (cover, contain,...)

 

[tx_g]

Leider Funktioniert das ganze noch nicht so wirklich
http://prntscr.com/i3gi2z

* {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    font-family: Arial;
    font-size: 17px;
	height: 100%;
}

.container {
    position: relative;
    width: 16%;
	height: 25%;
}


.container .content {
    position: absolute;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    color: #f1f1f1;
    width: 100%;
    padding: 20px;
	max-height: 25%;
}
.container img{
	vertical-align: middle;
	width: 100%;
    height: auto;
}

//Edit
wenn ich das Bild auf 100% setze funktioniert das mit dem ausfüllen schonmal, aber skaliert er das Bild dabei.
http://prntscr.com/i3git4


//Übersehen

Oder das ganze als background image und dann kannst du einstellen, wie das Bild das div abdecken soll (cover, contain,...)

Das wäre auch möglich, finde ich aber von der Nutzung her nicht ganz so einfach zu verwalten