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

Bootstrap zdjęcie wysokie na cały ekran (nie więcej)

VPS Starter Arubacloud
0 głosów
598 wizyt
pytanie zadane 5 marca 2017 w HTML i CSS przez niezalogowany

Cześć, potrzebuję aby zdjęcie wyświetlało mi się na całej wysokości strony.

<img src="14.jpg" class="img-fluid img-custom"  alt="image">

.img-custom{
    width: 100%;
    height: auto;
}

zdjęcie wyświetla mi się w szerokości dobrze ale wysokość jest za dużo i po scrolowaniu w dół obrazek jeszcze się ciągnie a chcę żeby po scrollu obrazek się kończył i zaczynała następna sekcja strony (strona one-column)

wie ktoś jak przeskalowac taki obrazek ?

5 odpowiedzi

0 głosów
odpowiedź 5 marca 2017 przez mtk3d Nałogowiec (46,690 p.)
Możesz zrobić div o wysokości i szerokości 100% (pamiętaj, że wtedy elementy <html> i <body> muszą mieć wysokość również ustawioną na 100%) i dać mu tło z background-size: cover;.
0 głosów
odpowiedź 5 marca 2017 przez jaca121212 Nałogowiec (40,760 p.)

Przykład ale nie wiem czy ci o takie cóż chodziło.

musiałbyś wstawić cały kod HTML jak  i CSS. wtedy możemy zobaczyć gdzie robisz błąd i możemy cię nakierować na trop.

0 głosów
odpowiedź 5 marca 2017 przez TheFunny Gaduła (3,420 p.)

Może height: 100vh;

Obrazek ustawi się na cały widoczny obszar. Dalej go nie ma.

O to Ci chodzi?

0 głosów
odpowiedź 12 września 2023 przez Visual Studio Kot Bywalec (2,550 p.)
edycja 12 września 2023 przez Visual Studio Kot

edit. Właśnie zauważyłem z kiedy jest to pytanie XD Może komuś się jeszcze przyda

Ustaw jego height na 100vh a jeżeli po tym problemem jest za długi obrazek to możesz użyć overflow: hidden dla diva, który jest jego rodzicem. Możesz też użyć innej sztuczki i stworzyć diva z  background-img do jego wyświetlenia zamiast <img />

przykład:

.img-me {
width: 100vw;
height: 100vh;
background-image: url('./background.jpg');
background-size: cover;
background-position: center;
}

Tak samo możesz postąpić z dowolnym divem na stronie, jeżeli chcesz by zajmował 100% wysokości ekranu, na którym jest wyświetlany i nie zostawiał pustych przestrzeni po boku spowodowanych proporcją.

0 głosów
odpowiedź 13 września 2023 przez VBService Ekspert (251,210 p.)

IMHO tu koledzy @TheFunny i @Visual Studio Kot w dobrym kierunku naprowadzają Ciebie na rozwiązanie Twojego "problemu", ale może też miej też na uwadze, że w css-ie od jakiegoś czasu pojawiły się "jednostki miary", które mają za zadanie ułatwić tego typu rozwiązania. Sprawdź: The Large, Small, and Dynamic Viewports

Podobne pytania

0 głosów
0 odpowiedzi 141 wizyt
0 głosów
1 odpowiedź 216 wizyt
0 głosów
1 odpowiedź 191 wizyt
pytanie zadane 1 stycznia 2019 w HTML i CSS przez kazik8980 Użytkownik (810 p.)

92,453 zapytań

141,262 odpowiedzi

319,086 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!

...