Issue
I'm making a full-screen image viewer with navigation buttons, a sidebar and thumbnail strip at the bottom. I'm trying to fit the image to its container div with object-fit: scale-down - it's working width-wise, but it's not fitting it height-wise - it's squashing the "thumbnails" section down and/or causing the page to scroll downwards, instead of resizing the image as I expected it to. And it's showing a lot of unnecessary blank space top and bottom.
body {
padding: 0;
background-color: black;
}
.container {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100vh;
display: flex;
flex-direction: column;
}
.top {
flex: 1;
display: flex;
flex-direction: row;
}
.image_viewer {
flex: 1;
width: 80%;
display: flex;
flex-direction: column;
}
.image_container {
flex: 1;
}
.image_container img {
height: 100%;
width: 100%;
object-fit: scale-down;
}
.controls {
background-color: red;
color: white;
text-align: center;
}
.sidebar {
width: 20%;
background-color: blue;
color: white;
}
.bottom {
height: 150px;
background-color: green;
text-align: center;
}<html>
<body>
<div class="container">
<div class="top">
<div class="image_viewer">
<div class="image_container">
<img src="https://picsum.photos/400/800">
</div>
<div class="controls">
controls go here
</div>
</div>
<div class="sidebar">
sidebar goes here
</div>
</div>
<div class="bottom">
thumbnails go here
</div>
</div>
</body>
</html>In the demo I've set the bottom div to height: 150px but in practice I want this div to take the minimum height depending on its contents, to give the image the most space.
What am I doing wrong?
Solution
Everything is positioned fine before the image loads ... but when it does load, that’s when the layout breaks. So it’s definitely the image itself which is breaking the layout.
So ... you need to take the image out of the flow by styling it with position: absolute and its parent as position: relative. This guarantees that the image will not affect the layout.
body {
padding: 0;
background-color: black;
}
.container {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100vh;
display: flex;
flex-direction: column;
}
.top {
flex: 1;
display: flex;
flex-direction: row;
}
.image_viewer {
flex: 1;
width: 80%;
display: flex;
flex-direction: column;
}
.image_container {
flex: 1;
position: relative;
}
.image_container img {
position: absolute;
height: 100%;
width: 100%;
object-fit: scale-down;
}
.controls {
background-color: red;
color: white;
text-align: center;
}
.sidebar {
width: 20%;
background-color: blue;
color: white;
}
.bottom {
height: 50px;
background-color: green;
text-align: center;
}<div class="container">
<div class="top">
<div class="image_viewer">
<div class="image_container">
<img src="https://picsum.photos/400/800">
</div>
<div class="controls">
controls go here
</div>
</div>
<div class="sidebar">
sidebar goes here
</div>
</div>
<div class="bottom">
thumbnails go here
</div>
</div>After running this snippet, use the full page link to test the responsiveness.
PS. It’s interesting that landscape or square images do not break your layout, it’s only portrait ones which do. I don’t understand the reasons for this, but I would love to learn if someone else can explain it.
Answered By - Brett Donald
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.