[mer]

Czołem mirki,
https://www.codeply.com/p/NCNJahyVTO
Chciałbym zmusić obrazek by nigdy nie przekraczał wysokości rodziców(tylko się skalował- dlatego liczyłem że img-fluid załatwi sprawę).
Niestety wysokość rodzica muszę wymuszać w pixelach(tak jak na przykładzie wyżej).

Podumowując mirki, chciałbym żeby obraz skalował się do rodzica(w tym przypadku - nie przekrocz 200px)
#webdevhelp #bootstrap #html #css #webdev

[Radaka]

@mer:

.col-12 img {
height: 100%;
width: 100%;
object-fit: fill;
}

[mer]

@Radaka: Niestety nie :(
doprecyzuję jeszcze - chcę by obrazek proporcjonalnie się zeskalował, oraz nie przekroczył wysokości narzuconej przez rodzica - w tym przypadku 200px.

[Radaka]

@mer: Nie chce mi się konta zakladać na codepl

html:


css:

.col-12 {
height: 200px;
}

img {
height: 100%;
width: 100%;
object-fit: cover;

}

o to Ci chodzi ?

[mer]

Teoretycznie zadziała, ale nie chcę ustawiać wysokości col-12 na sztywno, to komponent angularowy, i chcę by się słuchał rodzica.

[Radaka]

@mer: możesz img umieścić w innym kontenerze i nadać mu klasę lub styl który będzie przyjmował propsy od rodzica