I'm a beginner in html css.I'm trying to make a basic html css page containing 3 column divs. 2 of them of width 40% each and one of them being just for buttons or text so 15-20%. The total height of everything shouldn't go beyond 100vh (i.e. no scrolling). Rough layout in the image. Image Link
The 1st column will hold a single image of varying aspect ratio. The image needs to be anchored to the left of the 1st column with adjustable height. (Also, I know it'll be fine if I have a vertical Image, but I don't know what to do if I get a horizontal Image, so any help with that will also be great)
The 2nd Column will hold 2 images in column view with now border/margin/padding between each other (i.e. no border between the 2nd column images). They need to be of the same width while displaying and need to have a height on 100% the page size only. And that is where the issue is going, either the images take their different sizes and show weirdly or they aren't in their aspect ratios (i.e. are stretched or skewed) or if I try to achieve both, they just fill the entire 40% width and go out of the page vertically. How do I resize the div or the flex box or the img tags to keep things proportional and responsive as well?
Edit: The images cannot be cropped.
Here's the html code,
<!DOCTYPE html><html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"><title>Test Move Object</title><script type="text/javascript" src="../frontend/index.js"></script><link rel="stylesheet" type="text/css" rel="noopener" target="_blank" href="../frontend/index.css"></head><body onload="docReady()" onkeydown="" onkeyup="" ><div class="container1" ><div class="container2" style="flex: 1.5 1 auto; padding: 0;"><div style=""><img id="image2" src="../frontend/testimg.jpg" alt="Main Image" ><!-- <img id="image1" src="../frontend/Red_line.png" > --></div><div class="container3" style="flex: 1 1 auto;" ><div style="flex: 1 1 auto;"><img id="croppedimg1" src="../frontend/croppedtemp.jpg" alt=""></div><div style="flex: 1 1 auto;"><img id="croppedimg2" src="../frontend/cropped.jpg" alt=""></div></div></div><div style="width: 15%; flex: 0.3 1 auto;"><h3 id="speed">Speed Placer</h3><h3 id="test1">Test Placer</h3></div></div></body></html>Here's the css,
body, html { overflow: hidden; max-height: 100vh; height: 100vh; width: 100vw; position: absolute; top: 0; bottom: 0; margin: 0;}.container1 { height: 100%; display: flex; justify-content: space-between;}.container1 div { padding: 10px;}.container2 { display: flex; justify-content:flex-start;}.container3 { display: flex; flex-direction: column; align-items: center; justify-content: space-evenly; object-fit: contain; width: fit-content; height: 100%;}.container3 div { height: fit-content; /* width: 100%; */ padding: 0; object-fit: contain;}.container3 div img { /* height: 50%; */ width: 100%;}img { /* position: relative; */ height: 100%;}#image1 { height: 1px; position: absolute; width: inherit; top: 5px; left: 5px;}h3 { width: 20vw;}If I change 2nd column image div and img css, i.e.,
.container3 div { height: 50%; padding: 0; object-fit: contain;}.container3 div img { width: fit-content; }then it fits the images in 100% height, but,
- the get of different width and,
- the padding on the bottom of the bottom image is gone.
I kind of think that if I can fit the 2nd column flex box to 100% height, it might work, but being a part of another flex box, it's adjusting it's width and hence the height gets bigger than we need.Also I'm not sure if putting these many flex boxes was a mistake altogether.
I had a work around for this by sending both images to server side, stitching them together and showing a single image here, but I need to this to be faster and the server side thing would slow things down.