加载图像时停止页面跳转

Question

我正在 PHP/HTML5 中构建一个 CSS 网格布局，主要用于显示带有文本的图像，有时还结合视频显示（本示例中未使用）。仍然让我烦恼的一件事是加载图像时页面跳转。

为避免 img 标签应该事先知道抛出的 CSS 或其他比例，大多数使用的图像都有 1:1,414 的比例，但也有例外，因此仅使用一个比例是行不通的。在每个 img 标签上添加宽度和高度也不起作用。

我使用的是 base64 透明 gif，因此在下载真实图像之前它需要加载一些内容。在 CSS 中，每个图像之前都有一个占位符颜色（灰色），因此您可以看到正在加载的内容。图像宽度设置为 100%（这很好），高度在 CSS 中设置为自动。在这里展示一小部分用于网格和放置图像的 HTMl+CSS 编码：

.grid-container img {
  display: block;
  width: 100%;
  height: auto;
}

.grid-1,
.grid-2,
.grid-2-left,
.grid-3,
.grid-3-left,
.grid-3-thumb,
.grid-4,
.grid-4-left,
.grid-4-thumb {
  align-self: center;
  /* start | end | center | stretch */
  position: relative;
  /* for title-project placement */
  background-color: #ccc;
  /* placeholder */
}

.grid-2,
.grid-2-txt {
  grid-column: span 6;
}

<div class="grid-2">
  <img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="https://i.imgur.com/eys1d9h.jpg" class="lazyload" alt="<?php echo $title; ?>">
</div>

Answer 1

我这样做的方法是使用基于百分比的垂直填充和一些额外的 div。

基本上，如果我在一个元素上说padding-bottom: 20%，它的底部填充将等于父元素宽度的 20%。

假设我们事先知道图像的宽度和高度，我们可以使用它来为我们的图像制作一个响应式支架。

因此，例如，我们有一个 500 像素宽和 300 像素高的图像。 ((300 / 500) * 100) = 60。使用上述数字，我们执行以下操作：

1. 使用max-width: 500px（或我们想要显示图像的任何宽度）创建一个div
2. 创建上述 div 的子 div，并将 padding: 0 0 60% 设置为相对位置
3. 创建上面的子 div 即 position: absolute 并将顶部、左侧、右侧和底部设置为 0
4. 把图片放到上面，设置为max-width: 100%

结果是一个 div，该 div 具有正确的图像纵横比，可用于加载图像。

	.image-wrapper {
		background-color: #cccccc;
	}
	
	.image-wrapper > div {
		position: relative;
	}
	
	.image-wrapper > div > div {
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
	}
	
	.image-wrapper > div > div > img {
		max-width: 100%;
	}

	.image-wrapper > div > div:hover > img {
		display: none;
	}

	<div class="image-wrapper" style="max-width: 500px;">
		<div style="padding: 0 0 60%;">
			<div>
				<img src="https://www.willowsvetgroup.co.uk/wp-content/uploads/2017/08/Hyperthyroidism-in-cats-500x300.jpg">
			</div>
		</div>
	</div>