调整多个图像宽度以保留在父级中，水平对齐

Question

我有一个需要存储图像的空间，每个图像宽度为总宽度的25％。

图像大小无关，图像需要调整为25％的宽度。

图像之间也有填充，但是第一个和最后一个都没有填充到父对象。

我使用float是因为某些用户使用IE9和10。

* {box-sizing: border-box;}
.row {
  max-width: 35rem;
  margin: 0 auto;
  border: 1px solid red;
}

.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

.lt {
  margin: 3rem auto 0;
}

.lt a:first-child {
  padding-left: 0;
}

.lt a {
  display: block;
  float: left;
  text-align: center;
  padding: 0 .5rem;
  padding-left: 0.5rem;
  width: 25%;
}

.lt a img {
  height: auto;
  width: 100%;
  overflow: hidden;
}

<div class="row">
  <div class="lt clearfix">
    <a href="#"><img src="https://via.placeholder.com/150" /></a>
    <a href="#"><img src="https://via.placeholder.com/150" /></a>
    <a href="#"><img src="https://via.placeholder.com/150" /></a>
    <a href="#"><img src="https://via.placeholder.com/150" /></a>
  </div>
</div>

Answer 1

IE9和10将支持calc，因此您可以获得实际的百分比大小。另外，我会尝试在所有图像上保持相同的填充/边距。然后弄乱容器，使所有东西对齐。

  .row {
  max-width: 35rem;
  margin: 0 auto;
  border: 1px solid red;
}

.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

.lt {
  margin: 0.3rem auto 0 auto;
}

.lt a {
  display: block;
  float: left;
  text-align: center;
  margin:0;
  padding: 0 .5rem; /* top/bottom & left/right */
  /* padding-left: 0.5rem;  -- removed it's the same as above */
  width: calc(25% - 1rem); /* max-width minus padding */
}

.lt a img {
  height: auto;
  width: 100%;
  overflow: hidden;

<div class="row">
  <div class="lt clearfix">
    <a href="#"><img src="https://via.placeholder.com/150" /></a>
    <a href="#"><img src="https://via.placeholder.com/150" /></a>
    <a href="#"><img src="https://via.placeholder.com/150" /></a>
    <a href="#"><img src="https://via.placeholder.com/150" /></a>
  </div>
</div>

Answer 2

要解决此问题，您需要 4个元素，占父元素的25％，但是您还需要对其中3个元素进行填充0.5rem ，并且将导致这4个元素将占用更多容器的100％。

IE9对calc部分支持，因此我建议您使用calc减去对每个元素的填充宽度，如下所示：

width: calc(25% - (1.5rem / 4));

编辑： 如OP稍后所述，有box-sizing:border-box，为了解决另一个问题，此答案将padding更改为margin。

在此处查看完整的示例：

* {
  box-sizing: border-box;
}

.row {
  max-width: 35rem;
  margin: 0 auto;
  border: 1px solid red;
}

.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

.lt {
  margin: 3rem 0.5rem 0;
}

.lt > a + a {
  margin-left: 0.5rem;
}

.lt a {
  display: block;
  float: left;
  text-align: center;
  width: calc(25% - (1.5rem / 4));
}

.lt a img {
  height: auto;
  width: 100%;
  overflow: hidden;
}

<div class="row">
  <div class="lt clearfix">
    <a href="#"><img src="https://via.placeholder.com/150" /></a>
    <a href="#"><img src="https://via.placeholder.com/150" /></a>
    <a href="#"><img src="https://via.placeholder.com/150" /></a>
    <a href="#"><img src="https://via.placeholder.com/150" /></a>
  </div>
</div>

---

奖金：

我已经更改了在图片之间进行填充的策略，以使用相邻的兄弟选择器：

.lt > a + a {
  margin-left: 0.5rem;
}

Answer 3

* {
  box-sizing: border-box;
}

.container {
  max-width: 35rem;
  margin: 0 auto;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  border: 1px solid red;
}

.row {
  margin-left: -1rem;
  margin-right: -1rem;
}

.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

.box {
  width: 25%;
  float: left;
}

.box-link {
  display: block;
  padding: 0.5rem;
}

.box-img {
  height: auto;
  max-width: 100%;
}

<div class="container clearfix">
  <div class="row ">
    <div class="box">
      <a class="box-link" href="#"><img class="box-img" src="https://via.placeholder.com/150" alt=""></a>
    </div>
    <div class="box">
      <a class="box-link" href="#"><img class="box-img" src="https://via.placeholder.com/150" alt=""></a>
    </div>
    <div class="box">
      <a class="box-link" href="#"><img class="box-img" src="https://via.placeholder.com/150" alt=""></a>
    </div>
    <div class="box">
      <a class="box-link" href="#"><img class="box-img" src="https://via.placeholder.com/150" alt=""></a>
    </div>
  </div>
</div>