(!) Although this question may seem repetitive, I have not been able to find a suitable solution in any of the previous 10 topics. I apologize for the inconvenience and am actively seeking a resolution to this unique situation;
Allow me to outline the issue at hand:
Below is an image that might provide clarity on the problem:
https://i.sstatic.net/RTjsi.jpg
The challenge lies in having a full-width div with a height that changes dynamically based on page alterations. This div is filled with images spanning its entire width, as illustrated in the screenshot below:
https://i.sstatic.net/YG933.jpg
My objective is to make this div both full width and full height, independent of its parent's height.
(As the parent's height depends on the screen's top-to-bottom distance - Any change in screen height will consequently impact the div's height);
The issue arises when:
The screen adopts a width-to-height ratio of 1:2 (width:height), causing the images to resize since the page's width (which determines the maximum image width) cannot fill the height completely, thus failing to meet my intended outcome, as depicted in the following screenshot:
https://i.sstatic.net/wZQjd.jpg
(the red portion represents the parent container of the image)
- I am exploring solutions using javascript/jquery/css
- Using the image as a background has proven ineffective in my previous attempts
- Any advice or guidance offered would be greatly appreciated and acknowledged;
- If you deem this topic inappropriate or violating community guidelines, please inform me so I can promptly remove it to avoid spamming this esteemed community.
Thank you in advance! (Please accept my apologies for the lengthy nature of this query)
Warm regards,
Vladimir