替换元素

图像和视频又称替换元素。CSS不能影响它们的内部布局，只能影响它们在页面上相对于其他元素的位置。

某些替换元素也有宽高比。这意味着它在x和y方向上具有大小，并且默认情况下将使用文件的固有尺寸进行显示

调整图像大小

CSS中万物皆盒，如果把一张图片放在一个盒子里，而这张图片的原始长宽比盒子的小或大，那么图片要么缩在盒子里，要么从盒子溢出。

1
2
3
4
5
6
7
8
9
10
11
12
13
14

<div class="wrapper">
  <div class="box"><img src="star.png" alt="star"></div>
  <div class="box"><img src="balloons.jpg" alt="balloons"></div>
</div>

<style>
.box {
  width: 200px;
}

img {

}
</style>

常用的方法是将一张图片的 max-width 设为 100%。这将会使图片的尺寸小于等于盒子。这个技术也会对其他替换元素（例如