在加载图像时停止页面跳转

Question

我正在PHP/HTML5 5中构建一个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 we，高300 we的图像。((300 / 500) * 100) = 60。根据上述数字，我们将进行以下操作：

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

结果是一个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>

​