• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

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

VPS Starter Arubacloud
0 głosów
596 wizyt
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

0 głosów
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 :)

0 głosów
odpowiedź 30 sierpnia 2017 przez bartek-koduje Bywalec (2,490 p.)
http://jsbin.com/vexatehohe/edit?html,css,output

Napisz proszę czy taki efekt pragnąłeś osiągnąć?
komentarz 30 sierpnia 2017 przez miszor98 Nowicjusz (150 p.)
Dziękuję za  pomoc ale chodziło mi o coś innego :)

Podobne pytania

0 głosów
2 odpowiedzi 961 wizyt
0 głosów
4 odpowiedzi 973 wizyt
pytanie zadane 18 lutego 2016 w HTML i CSS przez mix091 Nowicjusz (210 p.)
0 głosów
2 odpowiedzi 630 wizyt
pytanie zadane 14 maja 2016 w HTML i CSS przez kejzak Nowicjusz (140 p.)

92,452 zapytań

141,262 odpowiedzi

319,085 komentarzy

61,854 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...