skalowany obrazek , background ,bez wysokości diva (?)

pytanie zadane 30 sierpnia 2017 w HTML i CSS przez miszor98 Nowicjusz (150 p.)

Witam.Mam problem z grafika na stronie a mianowicie chciałbym pod moim menu na stronce uzyskać skalowany obrazek na cała szerokość okna w zależności od rozdzielczości i bez utraty jakości , ( jednak nie chodzi o to żeby grafika zajmowała cala stronę jako background - body, tylko jedynie dany kontener -div i tu moje pytanie , jak coś takiego zrobić ? bo gdy chce to uzyskać to za pomocą background-size:cover to bez podawania wysokości na sztywno w (px) nie chce wczytać obrazka a powinien chyba automatycznie dostosowywać do zdjęcia - (1440 x 2560) . Gdzie może być bład ? albo jak to zrobić w podobny sposób ?

div w którym chce mieć responsoryjny obrazek

.slider{
background-size: cover;
background-position: center;
background-image: url('mrobot.jpg');
width:100%;
}

2 odpowiedzi

odpowiedź 30 sierpnia 2017 przez rafal.budzis Szeryf (85,260 p.)
wybrane 30 sierpnia 2017 przez miszor98

Najlepsza

Jeśli div nie ma w sobie nic jego wysokość będzie równa 0px. Jeśli dodasz tekst do diva div się powiększy.

Jedynymi sposobami na ustawienie wysokości diva jest ustawienie mu na stałe CSS właściwości height lub dodanie do niego elementów które go rozciągną. Być może lepszym rozwiązaniem jest użycie tagu <img> ?

Jeszcze jednym sposobem jest ustawienie wysokości jednostkami takimi jak szerokość obszaru roboczego.

.slider{ 
 height:40vw;/* 40 procent szerokości */
}

komentarz 30 sierpnia 2017 przez miszor98 Nowicjusz (150 p.)

Dzięki wielkie !! , o taki efekt mi chodziło , minimalnie mi ucina głowę postaci ale to zmniejszę zdjęcie w Photoshopie i powinno być spoko , dzięki jeszcze raz :)

komentarz 30 sierpnia 2017 przez rafal.budzis Szeryf (85,260 p.)

Może powinieneś użyć background-size:contain ? Wtedy nie utnie. chociaż najlepsze rozwiazanie chyba było by oparte o <img>

komentarz 30 sierpnia 2017 przez miszor98 Nowicjusz (150 p.)

Contain byłby dobry tylko ucina mi boki a chce mieć na cała szerokość wiec chyba musi byc cover i coś pokombinować muszę z obrazkiem w Photoshop , chodzi mi o dokładnie coś takiego jak na tej stronie >>> https://www.wfm-kuchnie.pl/ ,a dokładnie ich slider , maja je jako background i w każdej rozdzielczości je ładnie skaluje , jeśli masz lepszy pomysł z tym img to dawaj :)