I have a row where i want to display an image on the left side and text on the right side. My image should have the same height as my text. My html looks like this:

<div >
    <div >
        <div >
            <div >
                <h1 >title...</h1>
                <p style="text-align: justify !important">text...</p>
                <p style="text-align: justify !important">text...</p>
            </div>
        </div>
        <div >
            <img
                
                src="../../../assets/img/participation.png"
                alt="Participation"
            />
        </div>
    </div>
</div>

No matter what I try the image always exceeds the height of the neighbouring column and thus increases the height of the row. Any solutions for this?

CodePudding user response：

background-image solution.

        @import url(https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css);
        .imgPlaceholder {
            position: relative;
        }
        .imgPlaceholder::before {
            content: "";
            position: absolute;
            width: 100%;
            height: 100%;
            background-image: url(https://images.pexels.com/photos/14297669/pexels-photo-14297669.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1);
            background-repeat: no-repeat;
            background-size: contain;
            background-position: center;
        }
        @media screen and (max-width: 991px){
            .wrapper {
                display: grid !important;
                grid-auto-rows: 1fr;
            }
            .imgPlaceholder::before {
                background-position: left;
            }
        }

        <div >
            <div >
                <div >
                    <div >
                        <h1 >title...</h1>
                        <p style="text-align: justify !important">text...</p>
                        <p style="text-align: justify !important">text...</p>
                    </div>
                </div>
                <div ></div>
            </div>
        </div>

CodePudding user response：

Take a look in codepen.

[https://codepen.io/sharif-mia/pen/eYKRWwo][1]

Photo credit:pixels.com