使图片行扩展以适应可用空间
Posted
技术标签:
【中文标题】使图片行扩展以适应可用空间【英文标题】：Make rows of pictures expand to fit in available space 【发布时间】：2019-04-09 12:42:42 【问题描述】：我正在尝试使用 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 的属性，但我不确定如何或在何处使用它。我希望这还没有在其他地方得到回答，但我无法找到类似的话题。问题是我需要保持图像比例，而不仅仅是填充空白空间。
提前感谢您的帮助！
【问题讨论】：
只是为了澄清您希望图像本身定义行的宽度以及行占据整个视口垂直空间的 100%？ 没错，我不想指定固定宽度，因为我只是用 php 生成行和一个包含我的图片的文件夹，因此它们可以不断变化。 【参考方案1】：请看代码中的cmets。
html:
<head>
<meta name="viewport" content="width=device-width" user-scalable="yes" initial-scale="1.0"> <!-- added -->
</head>
<div class="gallery">
<div class="row rowone">
<div class="frame">
<img src="https://photogrist.com/wp-content/uploads/2016/07/Brent-Purcell7.jpg" class="gallery-img">
</div>
<div class="frame">
<img src="http://1.bp.blogspot.com/-Pv3JbHcv59A/UFN5FxU8MfI/AAAAAAAAAd0/hWYnQlt3hYA/s1600/great_depth_of_field_in_landscape_photo.jpg" class="gallery-img">
</div>
<div class="frame">
<img src="https://photogrist.com/wp-content/uploads/2016/07/Brent-Purcell7.jpg" class="gallery-img">
</div>
<div class="frame">
<img src="http://1.bp.blogspot.com/-Pv3JbHcv59A/UFN5FxU8MfI/AAAAAAAAAd0/hWYnQlt3hYA/s1600/great_depth_of_field_in_landscape_photo.jpg" class="gallery-img">
</div>
</div>
<div class="row rowtwo">
<div class="frame">
<img src="https://image.shutterstock.com/image-photo/funny-carrot-series-450w-583823374.jpg" class="gallery-img">
</div>
<div class="frame">
<img src="https://image.shutterstock.com/image-photo/unusual-carrot-form-human-hand-450w-128098322.jpg" class="gallery-img">
</div>
<div class="frame">
<img src="https://image.shutterstock.com/image-photo/funny-carrot-series-450w-583823374.jpg" class="gallery-img">
</div>
<div class="frame">
<img src="https://image.shutterstock.com/image-photo/unusual-carrot-form-human-hand-450w-128098322.jpg" 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; -- removed */
height: 100%;
/* flex-wrap: nowrap; -- removed */
align-content: stretch;
/* align-items: stretch; -- removed */
/* justify-content: space-around; -- removed */
flex-wrap:wrap; /* added */
height:auto; /* added */
/* added to work with narrowest image in each row */
.rowone
width:388px;
.rowtwo
width:340px;
/* end - added to work with narrowest image in row */
.frame
margin: 2px;
overflow: hidden;
align-self:stretch; /* added - "align-self" works in ie */
flex:1 1 auto; /* added */
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;
height:100%; /* added */
.frame:hover .gallery-img
transform: scale(1.1);
链接：柱网全高 - https://codepen.io/carolmckayau/pen/NEqzpO
【讨论】：
要么这不能解决我的问题，要么有一些我不明白的地方。您似乎为第一行和第二行指定了固定宽度。我的行是自动生成的，所以我事先不知道每行的宽度，我只想每行有 4 张图片，并让它们展开直到整列到达窗口底部。【参考方案2】：您可以使用一些 javascript 来获取图像加载后的高度，然后计算每个 .frame 元素应占用的视口比例。
请参阅下面的演示，其中包含 cmets 中的文档：
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" ></div>
<div class="frame"><img src="https://via.placeholder.com/200x50" ></div>
<div class="frame"><img src="https://via.placeholder.com/200x300" ></div>
<div class="frame"><img src="https://via.placeholder.com/200x100" ></div>
</div>
<div class="row">
<div class="frame"><img src="https://via.placeholder.com/400" ></div>
<div class="frame"><img src="https://via.placeholder.com/400" ></div>
<div class="frame"><img src="https://via.placeholder.com/400x200" ></div>
<div class="frame"><img src="https://via.placeholder.com/400x800" ></div>
</div>
<div class="row">
<div class="frame"><img src="https://via.placeholder.com/500x200" ></div>
<div class="frame"><img src="https://via.placeholder.com/500x200" ></div>
<div class="frame"><img src="https://via.placeholder.com/500x200" ></div>
<div class="frame"><img src="https://via.placeholder.com/500x200" ></div>
</div>
<div class="row">
<div class="frame"><img src="https://via.placeholder.com/200x200" ></div>
<div class="frame"><img src="https://via.placeholder.com/300x400" ></div>
<div class="frame"><img src="https://via.placeholder.com/300x200" ></div>
<div class="frame"><img src="https://via.placeholder.com/300x100" ></div>
</div>
<div class="row">
<div class="frame"><img src="https://via.placeholder.com/500x400" ></div>
<div class="frame"><img src="https://via.placeholder.com/500x200" ></div>
<div class="frame"><img src="https://via.placeholder.com/500x300" ></div>
<div class="frame"><img src="https://via.placeholder.com/500x100" ></div>
</div>
</div>【讨论】：
我想过这个，但你知道我很懒，我试着去理解 flexbox 的能力哈哈，但是如果我没有找到其他解决方案，我可能会这样做！谢谢:)以上是关于使图片行扩展以适应可用空间的主要内容，如果未能解决你的问题，请参考以下文章
如何使几个组件垂直调整大小以适应CodenameOne中的可用空间？
如何设置 DataGridColumn 的宽度以适应内容（“自动”），但完全填充 MVVM 中 DataGrid 的可用空间？