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

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

odpowiedź 5 marca 2017 przez mtk3d Nałogowiec (46,690 p.)

odpowiedź 5 marca 2017 przez jaca121212 Nałogowiec (40,760 p.)

odpowiedź 5 marca 2017 przez TheFunny Gaduła (3,420 p.)

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ą.