I have stuck with making a responsive, horizontally scrollable gallery. Namely, I have some issues with layout and responsiveness.
All images have the same fixed height - 1200px. The width is variable in 850px~1200px.
Problem is that - I want every image to have the maximum height the viewport allows while keeping the correct aspect ratio with a text title below that image. This iamge+title should be responsive, i.e. keep that behavior on both mobile and desktop Chrome/Safari
The result should look like 
Here is a simple code to reproduce the problem:
body {
display: flex;
flex-direction: column;
}
.scrolling-gallery {
min-height: 300px;
width: auto;
overflow-y: clip;
display: flex;
overflow-x: scroll;
gap: 2px;
}
.image-container {
display: flex;
flex-direction: column;
min-width: max-content;
}
.large-image {
width: 1200px;
height: 1200px;
}
.medium-image {
width: 850px;
height: 1200px;
}<!DOCTYPE html>
<html>
<body>
<h1>Horizontal Gallery</h1>
<div class="scrolling-gallery">
<div class="image-container">
<img class="large-image" src="https://temp-image-test.s3.us-east-2.amazonaws.com/distortion_matrix_1200_1200_blue.png" />
<h2>Image 1</h2>
</div>
<div class="image-container">
<img class="medium-image" src="https://temp-image-test.s3.us-east-2.amazonaws.com/distortion_matrix_850_1200_red.png" />
<h2>Image 2</h2>
</div>
<div class="image-container">
<img class="large-image" src="https://temp-image-test.s3.us-east-2.amazonaws.com/distortion_matrix_1200_1200_green.png" />
<h2>Image 3</h2>
</div>
</div>
</body>
</html>I have made the part with the image but struggle to add the image titles. This is the website I'm working on: https://alisatrapsh.com/
Thanks for your help!
from Responsive horizontally scrollable image gallery
No comments:
Post a Comment