[mk321]

#css #webdev

Polecicie jakiś tutorial lub książkę o ustawianiu rozmiaru w CSS?

Przykładowo mam obrazek w div o stałych rozmiarach. Nie rozumiem kiedy na obrazku ma być height: auto, 0 lub 100%, a kiedy wpływ na to ma width. Kiedy zachowują się proporcje, kiedy proporcje dopasowują się do nadrzędnego, a kiedy pojawia się scroll.

Przykładowo chcę rozciągnąć obrazek na wysokość tego nadrzędnego diva i nie wiem jak. Szukam na stacku i próbuję coś kopiować, ale nie wychodzi. Chciałbym to zrozumieć.

[b.....y]

@mk321: w3schools?

[mk321]

@bledny: nie, tam są za mało skomplikowane przypadki. Jest opis parametrów czym niby się różni np. auto od 100%, ale nie ma jak tego używać w połączeniu z innymi i w zagnieżdżeniach. To tylko dokumentacja, a nie praktyczny tutorial.

[proweniencja]

@bledny: @mk321 A do tego po prostu klepiesz sobie przykłady. Robisz obok siebie 4 boksy z identycznymi parametrami, zmieniasz style obrazka dla każdego boksu i widzisz co się dzieje. Później wchodzisz na stronkę w Safari i stwierdzasz, że kogoś tutaj ostro po#^#&*... następnie odpalasz IE i stwierdzasz, że zakrzywiłeś czasoprzestrzeń.

[epi]

@mk321: najpierw musisz zrozumiec, czy potrzebujesz użyć img czy div z obrazkiem jako background ;)

w tym drugim przypadku zakładam, że masz diva o konkretnych podanych wymiarach
wtedy ustawiasz background-size: na cover i obrazek pokryje całego diva
sprawdź sobie tez inne wartości dla background-size i co one

[epi]

@mk321: najlepiej poeksperymentuj sobie z tym po prostu

sprawdz, jak sie obrazek zachowuje gdy:
- jest mniejszy niż parent
- jest wiekszy niż

[mk321]

@proweniencja: zmieniam parametry i próbuję różne kombinacje, ale nie uzyskuję tego co potrzebuję.

@epi: potrzebuję img, nie background. Bo ten img to jakiś mój element strony (np. będzie klikalny, potem w tym div oprócz dopasowanego obrazka będę miał pod spodem inne elementy).

Jak dam tylko width:100% to będą zachowane proporcje. A jak nie chcę mieć zachowanych proporcji to width:100% i height:100%? A jak w tym div mam pod

[proweniencja]

@mk321: https://codepen.io/diarusz/pen/QWyNjQZ i co chcesz zrobic?

[mk321]

@proweniencja: przykład co chcę uzyskać:
https://codepen.io/mk321/pen/vYLGNve

@epi

[mk321]

@proweniencja: jeśli pomoże, to ten img z klasą image można opakować w diva (ale mi to utrudniało).

[proweniencja]

@mk321: https://codepen.io/diarusz/pen/yLeOeoe ? W sumie dość pokrętnie tłumaczysz co chcesz osiągnąć.