对齐 1 个图像中的 4 个分割图像

Question

我正在尝试将这四个单独的拼接图像与原始图像对齐。我这样做是因为图像的每个部分都有一个单独的 link.

我让图像对齐。现在我想做的就是通过宽度缩小图像的大小：#%；

出于某种原因，这似乎不起作用。

如有任何帮助，我们将不胜感激。

这是 CodePen 的 link：http://codepen.io/anon/pen/pvGgdp

.split,
.split2,
.split3,
.split4 {
  display: inline-block;
  margin: -2px;
}
.spliter {
  margin-top: -3px;
}

<div class="splitWrapper">
  <div class="split">
    <a href="#">
      <img src="http://i.imgur.com/Jnah8Y0.png" title="source: imgur.com" />
    </a>
  </div>
  <div class="split2">
    <a href="#">
      <img src="http://i.imgur.com/mGftOCN.png" title="source: imgur.com" />
    </a>
  </div>
  <div class="spliter"></div>
  <div class="split3">
    <a href="#">
      <img src="http://i.imgur.com/ZooSwpU.png" title="source: imgur.com" />
    </a>
  </div>
  <div class="split4">
    <a href="#">
      <img src="http://i.imgur.com/sMsHX14.png" title="source: imgur.com" />
    </a>
  </div>
</div>

Answer 1

您可以使用背景图片并将它们分配给 a 标签。我在这里修改了你的 codePen > http://codepen.io/anon/pen/YPBwJX

不过，最好只用一张图片，叠加透明的a-tags，设置为显示块，这样就不用担心图片排队了！无论如何，请参阅下面的代码以了解所问的问题 =)

.splitWrapper {
    width: 850px;
    margin: auto;
}

a.split1 {
    background: url('http://i.imgur.com/Jnah8Y0.png');
}
a.split2 {
    background: url('http://i.imgur.com/mGftOCN.png');
}
a.split3 {
    background: url('http://i.imgur.com/ZooSwpU.png');
}
a.split4 {
    background: url('http://i.imgur.com/sMsHX14.png');
}

a.split{
    width: 417px;
    height: 300px;
    float: left;
    margin: 0;
    padding: 0;
    display: block;
    background-size: 417px 300px;
}

.clear { clear: both; }

<div class="splitWrapper">
    <a href="#" class="split split1"></a>
    <a href="#" class="split split2"></a>
    <a href="#" class="split split3"></a>
    <a href="#" class="split split4"></a>
    <div class="clear"></div>
</div>

Answer 2

我认为您不太了解 % 在 CSS 中的工作原理。 % 表示父元素的百分比。此外，为了使其正常工作，父元素必须具有定义的宽度。这是您需要的 CSS 更改：

.splitWrapper {
  width: 100%;
}
.split, .split2, .split3, .split4 {
  display: inline-block;
  margin: -2px;
  width: 25%;
}
.split img,
.split2 img,
.split3 img,
.split4 img {
  max-width: 100%;
}

.spliter {
  margin-top: -3px;
}

http://codepen.io/anon/pen/KwJVGQ

您需要相应地调整边距。您应该使用百分比边距，因为您使用的是百分比。只需将边距的宽度除以元素的宽度，然后乘以 100 即可得到边距百分比。

对齐 1 个图像中的 4 个分割图像

Aligning 4 split images from 1 image

css

alignment

width