anand
anand
KPCKevin Powell - Community
Created by anand on 10/16/2023 in #front-end
Div element should have same height based on the background-image height
Hi All, This is first time i am asking a question, if you see any problem in QA pattern please help to correct me that is highly appreciable. Question :- how can any div/html element will auto-adjust their height based on the background-image height. Let’s s say, i have an image of height 500px. ( img1.jpg )
Structure of html
Structure of html
<div class="main_container"> <div class="card"></div> </div> <footer></footer> main_container => it has background-image: url('img1.jpg'); card => height is only 100px. footer => it can be anything but let's consider 100px. Let’s say if main_container is using the same height as of img1.jpg that is 500px. and card height is only 100px then we have 400px space remaining. i wanted to keep that space as gap between the main_container & footer. Solution: - i can use the padding/margin-bottom: 400px. but what if the card height got change or image height is changed, it should adjust automatically. I tried a solution you can find here using img tag. that is working looking for better approach using css without img tag. codesandbox link - https://codesandbox.io/s/div-auto-adjust-bg-image-height-vpmytw To replica the problem i did mention you have some css from styles.css section. please read that.
9 replies