Question

我正在尝试使用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的属性，但不确定如何或在何处使用它。我希望这个问题在其他地方没有得到解决，但是我找不到类似的话题。关键是我需要保持图像比例，而不仅仅是填充空白空间。

提前感谢您的帮助！

Answer 1

加载图像后，您可以使用一些Javascript来获取图像的高度，然后计算每个x_test = new_df.iloc[:, :280] y_test = new_df.iloc[:, 280]元素应占据的视口的比例。

请在注释中查看下面带有演示文件的演示：

.frame

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*/
}

Answer 2

请查看代码中的注释。

html：

<head>
  <meta name="viewport" content="width=device-width" height="device-height" 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

使图片行扩大以适合可用空间

2 个答案: