CSS 图片固定比例大小 在网站设计中，通常需要在页面中添加图片来丰富内容。然而，在大多数情况下，图片的大小并不恰当，会导致页面布局混乱或者图片失真。为了解决这个问题，我们可以使用 CSS 来控制图片固定比例大小。 首先，在 HTML 中需要添加一个 img 标签来插入图片，如下所示：

<img src="example.jpg" alt="example" class="example">

其中 src 属性表示图片地址，alt 属性表示图片的说明信息，class 属性用于在 CSS 中选择该图片。 然后，在 CSS 中使用如下代码：

.example {
width: 100%;
height: auto;
}

其中，width 属性设置图片宽度为 100%，height 属性设置自适应高度。这样，无论图片在哪个容器中，都会自动适应容器大小，并且保持比例不变。 此外，如果我们想要保持图片的宽高比，可以使用如下代码：

.example {
width: 100%;
height: 0;
padding-bottom: 50%; /* 假设图片的宽高比为 2:1 */
background-image: url(example.jpg);
background-size: cover;
}

其中，padding-bottom 属性设置为百分比，用于以容器的宽度为基准来计算图片高度。同时，使用 background-image 属性来设置图片地址，background-size 属性来设置图片填充方式。 综上，我们可以利用 CSS 来控制图片固定比例大小，从而统一网站的图片风格，提升页面的美观性和可读性。