Pusty div |
Pusty div |
27.07.2019, 21:19:45
Post
#1
|
|
Grupa: Zarejestrowani Postów: 9 Pomógł: 0 Dołączył: 24.07.2019 Ostrzeżenie: (0%) |
Witam,
mam pytanie odnośnie użycia background dla diva. Mam dwie kolumny, z których jedna jest zawsze równa wysokości drugiej więc jak mam np 10 linijek tekstu w jednej to w drugiej mam obrazek automatycznie na tą samą wysokość - tego chciałem. Problem jest taki, że div z obrazkiem jest pusty, a obraz ładuje do niego poprzez background w CSS, bo mam position, size itd. dla background... Jak to rozwiązać bym w divie z obrazkiem dawał <img src=""> i by nie był pusty... bo domyślam się że puste divy nie są zgodne ze sztuką. Czy da sie do img przypisać takie same parametry jak dla background ? Pozdrawiam HTML
CSS .imgContent .imgContentImg { background-image: url(/img/small/apartment-257344.jpg); background-position: center; background-size: cover; min-height: 200px; } |
|
|
27.07.2019, 22:36:39
Post
#2
|
|
Grupa: Zarejestrowani Postów: 6 782 Pomógł: 1826 Dołączył: 11.03.2014 Ostrzeżenie: (0%) |
-------------------- |
|
|
28.07.2019, 09:19:29
Post
#3
|
|
Grupa: Zarejestrowani Postów: 9 Pomógł: 0 Dołączył: 24.07.2019 Ostrzeżenie: (0%) |
Dzięki, super artykuł, ten jak i inne
Pomogło mi to połowicznie, mam teraz obrazek, centruje się względem tekstu ale musze mu nadać stałą wysokość... da się to zrobić tak, by obrazek był na 100% wysokości kolumny, tak jak background ? min-height, 100% czy auto nie działają... Jak dam wysokość większą niż tekst np 500px to jest ok, ale z background działało mi to tak, że obrazek był zawsze wyższy o te 2% paddingu tekstu i było super... Przykład: https://ibb.co/BcyQRcG
CSS
Ten post edytował mdynda 28.07.2019, 09:25:22 |
|
|
28.07.2019, 09:28:39
Post
#4
|
|
Grupa: Zarejestrowani Postów: 6 782 Pomógł: 1826 Dołączył: 11.03.2014 Ostrzeżenie: (0%) |
Zmień wysokość obrazka na 100% zamiast 200px.
-------------------- |
|
|
28.07.2019, 09:32:10
Post
#5
|
|
Grupa: Zarejestrowani Postów: 9 Pomógł: 0 Dołączył: 24.07.2019 Ostrzeżenie: (0%) |
Tak ale w tym przypadku obrazek robi się na 100% swojej wysokości a nie kolumny obok (z tekstem)
|
|
|
28.07.2019, 11:50:50
Post
#6
|
|
Grupa: Zarejestrowani Postów: 6 782 Pomógł: 1826 Dołączył: 11.03.2014 Ostrzeżenie: (0%) |
Dodaj do pierwszej kolumny:
Kod display: flex; dodatkowo wstaw tam jeszcze jeden <div> (a w nim dopiero obrazek), temu elementowi nadaj: Kod flex-grow: 1;
-------------------- |
|
|
Wersja Lo-Fi | Aktualny czas: 23.09.2024 - 03:09 |