需求：图片宽度显示为100%，在图片未加载前需要预设高度，防止图片加载完后内容蹦极。而图片高度会随着不同分辨率所变化，无法设置固定的预设高度。
一、模拟当前情况：
1.编码
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>图片显示</title>
<style>
.container {
width: 100%;
display: flex;
justify-content: center;
}
.content {
width: 100%;
}
.title {
font-size: 24px;
font-weight: bold;
margin-bottom: 20px;
}
.image {
display: block;
width: 100%;
}
</style>
</head>
<body>
<div class="container">
<div class="content">
<p class="title">图片1</p>
<img src="" class="image">
<p class="title">图片2</p>
<img src="" class="image">
<p class="title">图片3</p>
<img src="" class="image">
<p class="title">图片4</p>
<img src="" class="image">
<p class="title">图片5</p>
<img src="" class="image">
</div>
</div>
<script>
// 5秒后执行
setTimeout(() => {
let i = 0;
const imageSrcs = [
"https://i-blog.csdnimg.cn/direct/436796c8bd264b359b39c769310c9cde.jpeg",
"https://i-blog.csdnimg.cn/direct/d7147f78e2bb4035bd6b81353baf047f.jpeg",
"https://i-blog.csdnimg.cn/direct/777d089209f64ece8b96f127b08e443d.jpeg",
"https://i-blog.csdnimg.cn/direct/1f148d411b5e4d70868e4d72562db076.jpeg",
"https://i-blog.csdnimg.cn/direct/cf5755e2186a438383e8b2235dc812c0.jpeg"];
const images = document.querySelectorAll(".image");
images.forEach(image => {
// 设置src的值
image.src = imageSrcs[i];
i = i + 1;
});
}, 5000);
</script>
</body>
</html>2.图片加载前
图片未加载时因无预设高度聚集堆叠，加载完成后布局瞬间撑开（类似 "蹦极" 效果）
3.图片加载后
二、优化
1.原理
给图片添加min-height属性，值为不同分辨率下图片实际高度的70%。
2.CSS编码
html
<style>
.container {
width: 100%;
display: flex;
justify-content: center;
}
.content {
width: 100%;
}
.title {
font-size: 24px;
font-weight: bold;
margin-bottom: 20px;
}
.image {
display: block;
width: 100%;
}
/** 笔记本：宽度大于等于1366px时，图片高度设置为70%实际高度 **/
@media (min-width:1366px) {
.image1 {
/** 图片:1：宽1366px下，实际高度为2533px，这里设置70% **/
min-height: calc(2533px * 0.7);
}
.image2 {
/** 图片:2：宽1366px下，实际高度为1638px，这里设置70% **/
min-height: calc(1638px * 0.7);
}
.image3 {
/** 图片:3：宽1366px下，实际高度为2533px，这里设置70% **/
min-height: calc(2533px * 0.7);
}
.image4 {
/** 图片:4：宽1366px下，实际高度为2066px，这里设置70% **/
min-height: calc(2066px * 0.7);
}
.image5 {
/** 图片:5：宽1366px下，实际高度为2365px，这里设置70% **/
min-height: calc(2365px * 0.7);
}
}
/** 平板：宽度大于等于800px时，图片高度设置为70%实际高度 **/
@media (min-width:800px) {
.image1 {
/** 图片:1：宽1366px下，实际高度为1459px，这里设置70% **/
min-height: calc(1459px * 0.7);
}
.image2 {
/** 图片:2：宽1366px下，实际高度为943px，这里设置70% **/
min-height: calc(943px * 0.7);
}
.image3 {
/** 图片:3：宽1366px下，实际高度为1459px，这里设置70% **/
min-height: calc(1459px * 0.7);
}
.image4 {
/** 图片:4：宽1366px下，实际高度为1190px，这里设置70% **/
min-height: calc(1190px * 0.7);
}
.image5 {
/** 图片:5：宽1366px下，实际高度为1362px，这里设置70% **/
min-height: calc(1362px * 0.7);
}
}
/** 手机：宽度小于等于200px时，图片高度设置为70%实际高度 **/
@media (min-width:200px) {
.image1 {
/** 图片:1：宽1366px下，实际高度为349px，这里设置70% **/
min-height: calc(349px * 0.7);
}
.image2 {
/** 图片:2：宽1366px下，实际高度为225px，这里设置70% **/
min-height: calc(225px * 0.7);
}
.image3 {
/** 图片:3：宽1366px下，实际高度为349px，这里设置70% **/
min-height: calc(349px * 0.7);
}
.image4 {
/** 图片:4：宽1366px下，实际高度为284px，这里设置70% **/
min-height: calc(284px * 0.7);
}
.image5 {
/** 图片:5：宽1366px下，实际高度为326px，这里设置70% **/
min-height: calc(326px * 0.7);
}
}
</style>3.图片加载前
4.图片加载后
