Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
Reply to this topicStart new topic
> Pusty div
mdynda
post 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

  1. <div class="container section imgContent">
  2. <div class="row display-flex">
  3. <div class="col-12 col-md-6 imgContentText">
  4. <h2>Zdjęcie plus tekst</h2>
  5. <p>
  6. Spicy jalapeno bacon ipsum dolor amet ham hock andouille burgdoggen beef ribs, biltong meatball cupim sausage drumstick ground round spare ribs ribeye ball tip.
  7. </p>
  8. </div>
  9.  
  10. <div class="col-12 col-md-6 imgContentImg">
  11. //tutaj wole miec img src zamiast pustego diva, ale by działało to dokładnie jak background w CSS
  12. </div>
  13. </div>
  14. </div>



CSS
.imgContent .imgContentImg {
background-image: url(/img/small/apartment-257344.jpg);
background-position: center;
background-size: cover;
min-height: 200px;
}
Go to the top of the page
+Quote Post
trueblue
post 27.07.2019, 22:36:39
Post #2





Grupa: Zarejestrowani
Postów: 6 761
Pomógł: 1822
Dołączył: 11.03.2014

Ostrzeżenie: (0%)
-----


https://kawalekkodu.pl/upychanie-walizki-cz...object-position


--------------------
Go to the top of the page
+Quote Post
mdynda
post 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 smile.gif
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

  1. <div class="container section imgContentRight">
  2. <div class="row align-items-center">
  3. <div class="col-12 col-md-6 imgContentImg">
  4. <img src="/img/small/apartment-architecture-bookcase-257344.jpg" alt="xxxxx">
  5. </div>
  6. <div class="col-12 col-md-6 imgContentText">
  7. <h2>Zdjęcie plus tekst</h2>
  8. <div>
  9. <p>
  10. Spicy jalapeno bacon ipsum dolor amet ham hock andouille burgdoggen beef ribs, biltong meatball cupim sausage drumstick ground round spare ribs ribeye ball tip. Picanha spare ribs jerky turkey pork chop burgdoggen t-bone swine rump meatball prosciutto bresaola pork loin ribeye sirloin. Spicy jalapeno bacon ipsum dolor amet ham hock andouille burgdoggen beef ribs.
  11. </p>
  12. </div>
  13. </div>
  14. </div>
  15. </div>


CSS
  1. .imgContentRight .imgContentText {
  2. padding: 2% 0 2% 2%;
  3. }
  4.  
  5. .imgContentRight .imgContentText h2 {
  6. text-align: left;
  7. }
  8.  
  9. .imgContentRight .imgContentText p {
  10. text-align: justify;
  11. }
  12.  
  13. .imgContentRight .imgContentImg img{
  14. width: 100%;
  15. height: 200px;
  16. object-fit: cover;
  17. object-position: center;
  18. }


Ten post edytował mdynda 28.07.2019, 09:25:22
Go to the top of the page
+Quote Post
trueblue
post 28.07.2019, 09:28:39
Post #4





Grupa: Zarejestrowani
Postów: 6 761
Pomógł: 1822
Dołączył: 11.03.2014

Ostrzeżenie: (0%)
-----


Zmień wysokość obrazka na 100% zamiast 200px.


--------------------
Go to the top of the page
+Quote Post
mdynda
post 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)
Go to the top of the page
+Quote Post
trueblue
post 28.07.2019, 11:50:50
Post #6





Grupa: Zarejestrowani
Postów: 6 761
Pomógł: 1822
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;


--------------------
Go to the top of the page
+Quote Post

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 



RSS Wersja Lo-Fi Aktualny czas: 29.03.2024 - 10:11