CSS - 即使行未满也使图像大小相同[重复]

Posted 2023-03-06

【中文标题】CSS - 即使行未满也使图像大小相同[重复]

【英文标题】：CSS - Make images same size even if row isn't full [duplicate]

【发布时间】：2016-08-18 21:48:24

【问题描述】：

我正在尝试在我的 rails 应用程序中为图像制作布局，但我遇到了对齐问题。

html

<div class="photos">
      <div class="photo-row">
          <div class="photo-wrapper">
            <a class="fancybox" rel="group" href=""><img class="pending-photo" src="http://blog.blogcatalog.com/wp-content/uploads/mario-300x300.jpg" ></a>
          </div>
         <div class="photo-wrapper">
            <a class="fancybox" rel="group" href=""><img class="pending-photo" src="http://blog.blogcatalog.com/wp-content/uploads/mario-300x300.jpg" ></a>
          </div>
          <div class="photo-wrapper">
            <a class="fancybox" rel="group" href=""><img class="pending-photo" src="http://blog.blogcatalog.com/wp-content/uploads/mario-300x300.jpg" ></a>
          </div>
      </div>
      <div class="photo-row">
          <div class="photo-wrapper">
            <a class="fancybox" rel="group" href=""><img class="pending-photo" src="http://blog.blogcatalog.com/wp-content/uploads/mario-300x300.jpg" ></a>
          </div>
          <div class="photo-wrapper">
            <a class="fancybox" rel="group" href=""><img class="pending-photo" src="http://blog.blogcatalog.com/wp-content/uploads/mario-300x300.jpg" ></a>
          </div>
      </div>
</div>

css

.photos 
  display: flex;
  flex-direction: column;
  border: 10px solid goldenrod;


.photo-row 
  border: 5px solid red;
  display: flex;



.photo-wrapper 
  border: 5px solid greenyellow;
  margin-right: 20px;  

.photo-wrapper:last-child 
    margin-right: 0;


.pending-photo 
  width: 100%;

我认为 flexbox 是最好的方法。我希望图像在 Windows 上调整大小，这就是为什么我有宽度：100%。

但我遇到的问题是，当最后一行没有三个图像时，它们会稍微改变它们的大小，我想保持图像大小相同。我希望所有行中的所有图像都与整行中的图像大小相同。所有图片的大小必须始终相同。

我尝试删除这些行，让它成为一个大 flexbox，但也遇到了对齐问题。

如果您使用 instagram，请找到最后一行照片未满的人。这是我想要的功能，但不知道他们是如何做到的。

jsfiddle

https://jsfiddle.net/kk7httso/11/

编辑：

实际上看起来我的问题与Flex-box: Align last row to grid 重复。我解决了插入空元素来填充行的问题，就像那里的第一个答案所建议的那样。

【问题讨论】：

我没有 instagram，所以我在这里遗漏了一些图片，但是如果您希望图像统一调整大小，为什么简单的百分比宽度不起作用？

@JosephMarikle 我希望所有行的所有图像大小完全相同。当一行只有两张图片时，它们比整行中的图片大得多，我不知道如何解决这个问题。

您是否尝试过使用flex 属性（我认为flex:1 auto）？喜欢这里：jsfiddle.net/koys2ok6

您的图像应该被放大，即使它们可能小于 1/3 列。对吗？

【参考方案1】：

你真的需要那个标记吗？

如果你把它保持在最低限度，那么它就会变得非常简单。不过，如果您想要所有这些边界，则不需要所有这些 divs。

jsFiddle

你只需要

.pending-photo 
  width: 32%;

【参考方案2】：

由于 Fancybox 是通过它的 JS 来确定尺寸的，所以你很难让它们变得完美。

通过一点点测试，您始终可以将宽度和高度设置为静态，然后使用媒体查询来更改大小。尽管这并不理想，但它似乎是唯一对您所追求的效果有效的方法。

/* Main image size */
    .pending-photo 
      height:100px;
      width:100px;
    

/* Mobile image size */
    @media (max-width:767px)

    .pending-photo 
      height:75px;
      width:75px;
    

    

【参考方案3】：

您可以在 .photo-wrapper 上设置最大宽度

.photo-wrapper 
  border: 5px solid greenyellow;
  margin-right: 20px; 
  max-width:calc(33.3333% - 20px); //one third minus the 20px margin
  box-sizing:border-box; // include the borders in the sizing

https://jsfiddle.net/kk7httso/23/

【参考方案4】：

试试旧的 CSS

.photo-wrapper 
  border: 5px solid greenyellow;
  margin-right: 20px;

  &:last-child 
    margin-right: 0px;
    

进入新的 CSS

.photo-wrapper 
  border: 5px solid greenyellow;
  margin-right: 20px;  

.photo-wrapper:last-child 
    margin-right: 0;

【讨论】：

谢谢，我会修改一下，但这并不能回答主要问题。