Objective: Develop a scrollable image-gallery web component with layouting that functions without script intervention.
Specifications:
- The size of the web component must be fully responsive and/or adjustable.
- The top main area of the widget is the gallery - a flex-row container where different images are horizontally displayed. Users can freely scroll left and right.
- The web component must include a bottom area with information about the current image, set to a fixed size [e.g. in px].
- Therefore, the gallery area should scale vertically.
[][][][][][][][][][][][][][][][][][][][][][][][][][][][][][][][][][][][][][][]
Issue in Firefox: View Problem Screenshot
Versions documented in the Screenshot: Chrome[v69], Firefox[v63]
[][][][][][][][][][][][][][][][][][][][][][][][][][][][][][][][][][][][][][][]
<style>
body {
display: grid;
grid-template-columns: 100%;
grid-template-rows: auto 50px;
height: 150px;
}
.container1 {
overflow-y:hidden;
display:flex;
}
.container2 {
background-color: green;
}
img {
height: 100%;
object-fit: scale-down;
align-self: stretch;
}
</style>
<body>
<div class="container1">
<img src="https://images.pexels.com/photos/67636/rose-blue-flower-rose-blooms-67636.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=350">
<img src="https://images.pexels.com/photos/67636/rose-blue-flower-rose-blooms-67636.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=350">
<img src="https://images.pexels.com/photos/67636/rose-blue-flower-rose-blooms-67636.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=350">
</div>
<div class="container2">Must maintain height of 50px</div>
</body>Problem in Chrome: While it worked on Chrome, there seems to be an issue on Firefox. Chrome prefers when the images are wrapped in divs.
<style>
body {
display: grid;
grid-template-columns: 100%;
grid-template-rows: auto 50px;
height: 150px;
}
.container1 {
overflow-y:hidden;
display:flex;
}
.container1>div{
align-self: stretch;
}
.container2 {
background-color: green;
}
img {
height: 100%;
object-fit: scale-down;
}
</style>
<body>
<div class="container1">
<div><img src="https://images.pexels.com/photos/67636/rose-blue-flower-rose-blooms-67636.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=350"></div>
<div><img src="https://images.pexels.com/photos/67636/rose-blue-flower-rose-blooms-67636.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=350"></div>
</div>
<div class="container2">Must maintain height of 50px</div>
</body>