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

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

CSS
.imgContent .imgContentImg {
background-image: url(/img/small/apartment-257344.jpg);
background-position: center;
background-size: cover;
min-height: 200px;
}

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

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

[HTML] pobierz, plaintext 
<div class="container section imgContentRight">
    <div class="row align-items-center">
        <div class="col-12 col-md-6 imgContentImg">
            <img src="/img/small/apartment-architecture-bookcase-257344.jpg" alt="xxxxx">
        </div>
        <div class="col-12 col-md-6 imgContentText">
            <h2>Zdjęcie plus tekst</h2>
            <div>
                <p>
                    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.
                </p>
            </div>
        </div>
    </div>
</div>
[HTML] pobierz, plaintext 

CSS

[HTML] pobierz, plaintext 
.imgContentRight .imgContentText {
    padding: 2% 0 2% 2%;
}
 
.imgContentRight .imgContentText h2 {
    text-align: left;
}
 
.imgContentRight .imgContentText p {
    text-align: justify;
}
 
.imgContentRight .imgContentImg img{
    width: 100%;
    height: 200px;
    object-fit: cover;
    object-position: center;
}
[HTML] pobierz, plaintext 

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

Tak ale w tym przypadku obrazek robi się na 100% swojej wysokości a nie kolumny obok (z tekstem)

Dodaj do pierwszej kolumny:

dodatkowo wstaw tam jeszcze jeden <div> (a w nim dopiero obrazek), temu elementowi nadaj: