background-size /auto a skalowalnosc

Question

Witam. Oto problem:

chciałbym by zdjęcie wyświetlało się w oryginalnych proporcjach. Jednocześnie chciałbym by nie wychodziło poza obszar diva.

powiedzmy, ze:

okno ma 500x500 px

obrazek: 200x200 px

wszystko ok. Ale gdy div ma np 150x150 px wówczas dalej widzę oryginalny rozmiar. (czyli nie mieści się) A nie chcę takiej sytuacji.

Wiem, że mogę zmienic w responsywnosci, ze przy danej szerokosci/wysokosci okna będzię np contain.

Chcę jednak by to było dynamiczne. Kiedy będę miał obrazek 1000x1000 to mi go przeskaluje a nie pokażę oryginału.

Czy da się to zrobić w css?

Answer 1

Nie wiem czy do końca zrozumiałem ale chyba chodzi o 
 

background-size: cover;

 

PS. Obecnie nie trzeba robić obrazków jako tło można użyć object-fit dla modyfikacji skalowania.

https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit

Comments

ok działa z / object-fit: scale-down;/ Dzięki