[Roballo]

Poradzi mi ktoś jak zrobić tak jak w linku poniżej?

Czarne obramowanie to div trzymający img (czerwone). I img ma być bez skalowania tak duże jak jest byleby było na samym środku. Jak to mogę zrobić?
Https://Imgur.com/a/9jG8AJ6
#webdev

[Roballo]

@Roballo to jest 

Background image odpada :(

[Jare_K]

@Roballo: ustaw sobie display tego diva jako table-cell i wtedy możesz mu dać wyśrodkowanie w poziomie i pionie. Obrazek trafi na środek niezależnie od rozmiaru.

[TeflonDon]

@Roballo: flexbox, display: flex; align-items: center; justify-content: center; dla diva z czarna ramka

[Roballo]

@TeflonDon a dla czerwonego?
@Jare_K próbowałem to tak nie działa

[TeflonDon]

@Roballo: a dla czerwonego mozesz opcjonalnie dac display: block

[Jare_K]

@Roballo: działa. Pewnie źle ustawiłeś. W sumie flex jest lepszym rozwiązaniem.

[Roballo]

@Jare_K https://jsfiddle.net/gvk9rzd0 pomyliłem osoby :P

Już sprawdzam twój pomysł

[Roballo]

@Jare_K też niet :(

[Roballo]

@TeflonDon coś muszę robić źle.. Bo oba nie działają

[Jare_K]

@Roballo: https://jsfiddle.net/6wqguzt2/
img nie ma tagu zamykającego. Tło i szerokość obrazka tylko przykładowe.

[Roballo]

@Jare_K tylko, że u mnie div musi trzymać środek tego img. Div będzie miał okrojona wersję tego img I do tego dojść nie mogę :/

Czarny to div, czerwony to img (zdjęcie)

[Jare_K]

@Roballo: dokładnie kwadrat (crop)?

[Roballo]

@Jare_K tak, tylko środek czarnego (okrojona wersja (środek) czerwonego img)

[Jare_K]

@Roballo: pokombinuj coś: https://jsfiddle.net/6wqguzt2/8/

[Roballo]

@Jare_K poprobuje, ale tam będzie wyłącznie horyzontalnie lecieć, nie mogę dodać by leciało w drugą bo się całe popsuje, kurna.

Uzylbym object-fit ale jest eksperymentalny