Question

这codepen将明确我要做的事情：

HTML：

QLineEdit

CSS：

  <div class="slider-container">
    <div class="table">
      <div class="row">
        <div class="cell">
          <img src="https://images.robertharding.com/preview/RM/RH/VERTICAL/983-675.jpg">
        </div>
        <div class="padding-cell"></div>
        <div class="cell">
          <img src="https://images.robertharding.com/preview/RM/RH/VERTICAL/983-675.jpg">
        </div>
        <div class="padding-cell"></div>
        <div class="cell">
          <img src="https://images.robertharding.com/preview/RM/RH/VERTICAL/983-675.jpg">
        </div>
      </div>
    </div>
  </div>

https://codepen.io/simonhrogers/pen/WJJVgL

当图像的纵横比特别高，或者屏幕特别压扁时，每个图像之间的间隙将开始比它们之间的指定填充单元的宽度拉得更宽。如何防止此行为，以便图像始终仅由填充单元格的宽度分隔？

如果太靠近屏幕的顶部/底部或侧面，我仍然需要缩小图像;就像我在这里，但它们之间有一个固定宽度的间隙而不是那个改变。

所需：

不期望的：

Answer 1

您可以通过对代码进行一些小的更改来获得所需的行为：首先为您的图片设置width:100%。第二个在单元padding-cell或px

中的班级rem中设置固定填充

＆＃13;

.slider-container {
  left: 4.5em;
  right: 4.5em;
  position: fixed;
  top: 4.5em;
  height: calc(100vh - 9em);
}

.slider-container .table {
  display: table;
  height: inherit;
  width: 100%;
}

.slider-container .table .row {
  display: table-row;
  width: 100%;
  height: inherit;
  vertical-align: middle;
  text-align: center;
}

.slider-container .table .row .padding-cell {
  display: table-cell;
  height: inherit;
  width: 20px;
}

.slider-container .table .row .cell {
  display: table-cell;
  height: inherit;
  vertical-align: middle;
}

.slider-container .table .row .cell img {
  max-height: 100%;
  max-width: 100%;
  width: 100%;
}

＆＃13;

<div class="slider-container">
  <div class="table">
    <div class="row">
      <div class="cell">
        <img src="https://images.robertharding.com/preview/RM/RH/VERTICAL/983-675.jpg">
      </div>
      <div class="padding-cell"></div>
      <div class="cell">
        <img src="https://images.robertharding.com/preview/RM/RH/VERTICAL/983-675.jpg">
      </div>
      <div class="padding-cell"></div>
      <div class="cell">
        <img src="https://images.robertharding.com/preview/RM/RH/VERTICAL/983-675.jpg">
      </div>
    </div>
  </div>
</div>

＆＃13;

虽然您可以使用flexbox更轻松地实现布局。

如何实现水平和垂直居中的多个图像之间的固定宽度间距

1 个答案: