I'm currently facing a complex CSS challenge that I can't seem to solve. I want to create an image controller (two-by-two layout on two lines) that can display:
- The top-left image in full size,
- The top-right with horizontal scrolling,
- The bottom-left with vertical scrolling,
- The bottom-right with both scrolling options.
Similar to Excel's fixed columns/rows feature.
Here is my HTML structure:
<div id="global">
<div id="feature-container">
<div id="feature-head">
<img id="feature-t-l" src="..." alt="..."/>
<img id="feature-t-r" src="..." alt="..."/>
</div>
<div id="feature-body">
<img id="feature-b-l" src="..." alt="..."/>
<img id="feature-b-r" src="..." alt="..."/>
</div>
</div>
</div>
And here is the corresponding CSS:
html {
height: 100%;
}
html body {
height: 100%;
margin: 0 8px 0 8px;
background-color: darkgrey;
}
html body h1 {
height: 10%;
width: 100%;
margin: 0;
padding-top: 2%;
box-sizing: border-box;
text-align: center;
}
html body #global {
height: 90%;
width: 100%;
max-width: 100%;
padding: 0% 2.5% 5% 2.5%;
box-sizing: border-box;
}
html body #global #feature-container {
height: 100%;
width: 100%;
background-color: white;
}
html body #global #feature-container #feature-header {
width: 100%;
white-space: nowrap;
}
html body #global #feature-container #feature-header > img {
vertical-align: bottom;
}
html body #global #feature-container #feature-header img#feature-t-l {
overflow-x: scroll;
}
html body #global #feature-container #feature-body {
width: 100%;
white-space: nowrap;
}
Currently, I'm facing issues with the top-left image not being cropped and the overflow functionality not working as desired. Is there a way to resolve this without using pixel values?
Edit: Thanks to Fausto NA for providing a helpful JSFiddle. In my project, the two top images are on the same line and there is no gap between the header and body sections.