Question

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

为了避免img标签应该知道要么输入CSS，要么预先知道比率是多少，所以使用的大多数图像都具有1：1,414的比例，但是有例外，因此只使用一个比例是行不通的。在每个img标签上添加宽度和高度也不起作用。

我正在使用base64透明gif，因此在下载真实图像之前需要加载。在CSS中，每个图像都有一个占位符颜色（灰色），因此您可以看到正在加载的内容。图像宽度设置为100％（好的），CSS中的高度设置为auto。在这里显示网格和放置图像的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。根据以上数字，我们执行以下操作：

使用max-width: 500px创建一个div（或者我们想要显示图像的任何宽度）
创建上述div的子div，padding: 0 0 60%设置为相对位置
创建上述position: absolute的上级div，上，左，右和下设置为0
将图像放在上面，并将其设置为max-width: 100%

结果是div具有正确的图像宽高比，可以加载任何尺寸的图像。

＆＃13;

	.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;
	}

＆＃13;

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

＆＃13;

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

1 个答案: