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 )
<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.
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 )
<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.
A friendly place for developers to meet other devs, ask questions, get help, and just have a good time 🙂.
36,263Members
Resources
Was this page helpful?
