使图片行扩展以适应可用空间
使图片行扩展以适应可用空间
提问于 2018-11-06 14:05:44
我正在尝试用CSS创建一个图片库，以这样的方式组织：
我使用PHP加载文件夹的每个图像，并创建我称为行的元素，其中包含相同数量的图片(在我的示例中，4个垂直对齐)。这些行是水平对齐的。我希望这些行/列调整它们的宽度，直到它们占据所有可用的垂直空间，以便如果我有4个垂直图像，行看起来更细，如果我有4个横向格式图像，行在水平方向更宽。请参见插图：
现在我只有这样的东西：
如果行太多，我就在右边做一个水平滚动条。
我的html代码如下：
<div class="gallery">
<div class="row">
<div class="frame">
<img class="gallery-img">
</div>
<div class="frame">
<img class="gallery-img">
</div>
<div class="frame">
<img class="gallery-img">
</div>
<div class="frame">
<img class="gallery-img">
</div>
</div>
<!-- other rows -->
</div>我的CSS如下：
body {
background-color: #dddddd;
}
.gallery {
width: 100%;
overflow: auto;
height: 100%;
display: flex;
flex-wrap: nowrap;
}
.row {
display: flex;
flex-direction: column;
height: 100%;
flex-wrap: nowrap;
align-content: stretch;
align-items: stretch;
justify-content: space-around;
}
.frame {
margin: 2px;
overflow: hidden;
display: flex;
align-items: center;
align-content: center;
justify-content: center;
box-shadow: inset 5px 5px 40px rgba(0,0,0,0.6);
-webkit-transition: box-shadow;
transition: all 0.5s ease;
}
.frame:hover {
box-shadow: inset 3px 3px 10px rgba(0,0,0,0.6);
}
.gallery-img {
-webkit-transition: transform;
transition: all 0.5s ease;
transform: scale(1);
position: relative;
z-index: -1;
}
.frame:hover .gallery-img {
transform: scale(1.1);
}我不知道flex-grow是否是这里的解决方案。我读过关于auto-fit或auto-fill的属性，但我不确定如何或在哪里使用它。我希望这个问题没有在其他地方得到回答，但我找不到类似的话题。问题是我需要保持图像的比例，而不仅仅是为了填补空白空间。
提前感谢您的帮助！
Stack Overflow用户
发布于 2018-11-11 04:19:04
您可以使用一些Javascript来获取图像加载后的高度，然后计算每个.frame元素应该占据的视口的比例。
请看下面的demo，评论中有相关文档：
window.addEventListener("load", () => {
const rows = document.querySelectorAll(".row");
for(let row of rows) {
const frames = row.querySelectorAll(".frame");
const imgs = row.querySelectorAll("img");
// calculate the sum of heights of all the img elements in a row
const totalHeight = Array.prototype.reduce.call(imgs, (a, img) => Number(img.naturalHeight) + a, 0);
// sets the height of each frame
for( let frame of frames) {
let imgOfFrame = frame.querySelector("img");
let fractionForFrame = imgOfFrame.naturalHeight / totalHeight * 100;
frame.style.height = fractionForFrame + "vh";
}
}
});body {
margin: 0;
padding: 0;
}
.gallery {
display: flex;
overflow-x: scroll; /* make the the gallery scrollable*/
}
.row {
margin-right: 20px;
flex-shrink: 0; /* make sure the flex items do not shrink*/
}
.row:last-child {
margin-right: 0;
}
.frame {
box-sizing: border-box;
padding: 10px 0; /*creates vertical spacing between images*/
}
.frame img {
display: block;
width: 100%;
height: 100%;
object-fit: cover; /*keeps the image from being distorted if the aspect ratio is off*/
}<div class="gallery">
<div class="row">
<div class="frame"><img src="https://via.placeholder.com/200x400" alt=""></div>
<div class="frame"><img src="https://via.placeholder.com/200x50" alt=""></div>
<div class="frame"><img src="https://via.placeholder.com/200x300" alt=""></div>
<div class="frame"><img src="https://via.placeholder.com/200x100" alt=""></div>
</div>
<div class="row">
<div class="frame"><img src="https://via.placeholder.com/400" alt=""></div>
<div class="frame"><img src="https://via.placeholder.com/400" alt=""></div>
<div class="frame"><img src="https://via.placeholder.com/400x200" alt=""></div>
<div class="frame"><img src="https://via.placeholder.com/400x800" alt=""></div>
</div>
<div class="row">
<div class="frame"><img src="https://via.placeholder.com/500x200" alt=""></div>
<div class="frame"><img src="https://via.placeholder.com/500x200" alt=""></div>
<div class="frame"><img src="https://via.placeholder.com/500x200" alt=""></div>
<div class="frame"><img src="https://via.placeholder.com/500x200" alt=""></div>
</div>
<div class="row">
<div class="frame"><img src="https://via.placeholder.com/200x200" alt=""></div>
<div class="frame"><img src="https://via.placeholder.com/300x400" alt=""></div>
<div class="frame"><img src="https://via.placeholder.com/300x200" alt=""></div>
<div class="frame"><img src="https://via.placeholder.com/300x100" alt=""></div>
</div>
<div class="row">
<div class="frame"><img src="https://via.placeholder.com/500x400" alt=""></div>
<div class="frame"><img src="https://via.placeholder.com/500x200" alt=""></div>
<div class="frame"><img src="https://via.placeholder.com/500x300" alt=""></div>
<div class="frame"><img src="https://via.placeholder.com/500x100" alt=""></div>
</div>
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/53166540
复制相关文章
相似问题
腾讯云开发者
