动态布局中的图像对齐

Question

我目前正在设计博客布局，但在寻找实现图像对齐的最佳方式时遇到了困难。

每个博客post有两张图片； 'background' 图像设置为 0.5 不透明度，第二个 'top' 图像设置为 1 不透明度。背景图像需要位于顶部图像下方。

到目前为止，我已经得到了这里的布局 http://dev.thefold.com.au/sandbox/staggered/portfolio-2-col.html 但是无法弄清楚如何在顶部图像下方获取背景图像，在顶部图像和背景图像之间留出 160px 的距离 - 在一种可以适应不确定图像高度的方法。此 html/css 最终将用于 Wordpress 主题，因此该解决方案需要适应用户添加的具有不同高度的图像。

这里有一张我想要实现的图片http://dev.thefold.com.au/sandbox/staggered/reworked.png

关于如何做到这一点有什么想法吗？

Answer 1

好的，看这里：

.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复制到
用 class bk-effect

div

第一张图片作为主图
最后一张图片将用作背景图片

目前，图像将向下偏移 160px，向右偏移 150px。您可以通过更改下面的相关行来更改这些值。

注意：我添加了 font-size: 0; line-height: 0; 以删除图像下的任何 space。这允许精确偏移，但这也意味着 .bk-effect 元素内不会显示任何文本。

对于提供的link，修改代码为：

.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 link.

的宽度

动态布局中的图像对齐

Image alignment in dynamic layout

html

css

image

vertical-alignment