动态布局中的图像对齐

好的,看这里:

.bk-effect {
  position: relative;
  display: inline-block;
  font-size: 0;
  line-height: 0;
}

.bk-effect img:first-child {
  position: relative;
  z-index: 10;
}

.bk-effect img:last-child {
  opacity: 0.5;
  position: absolute;
  z-index: 5;
  bottom: -160px; /* How much down of the original image */
  right: -150px;  /* How much right of the original image */
}

<div class="bk-effect">
  <img src="https://placehold.it/400x300/000">
  <img src="https://placehold.it/400x300/000">
</div>

要重用它:

• 复制CSS
• 制作一个 div bk-effect
• 第一个图像用作主图像
• 最后一幅图像将用作背景图像

目前,图像将偏移 160px 向下和 150px

font-size: 0; line-height: 0; .bk-effect 要素

对于提供的链接,请将代码更改为:

.img-portfolio > a {
  position: relative;
  display: inline-block;
  font-size: 0;
  line-height: 0;
  padding-right: 50px;   /* How much right of the original image */
  padding-bottom:160px; /* How much down of the original image */
  width: 85%; /* Move the 85% to here */
}

.img-portfolio > a img:first-child {
  position: relative;
  z-index: 10;
  box-sizing: content-box;
  width: 100%; /* Remove the 85% here and move it up */
}

.img-portfolio > a img:last-child {
  opacity: 0.5;
  position: absolute;
  z-index: 5;
  bottom: 0;
  right: 0;
  box-sizing: content-box;
}

a 链接