css 控制图片大小 |css3 xuanzheqi

/* 在CSS中控制图片大小的代码 */
img {
max-width: 100%; /* 设置最大宽度为父元素的100% */
height: auto; /* 高度自适应，保持图片原始比例 */
}

在CSS中，控制图片大小的最常用的方式是使用width和height属性。但这种方式有一个缺点，即图片的比例往往会被破坏，使图片看起来拉伸或压缩。为了避免这个问题，大家可以使用max-width属性代替width属性。

max-width属性的工作方式是设置一个最大宽度，如果图片实际宽度没有超过这个最大宽度，则显示原始尺寸，否则按比例缩小显示。另外，为了保持图片比例不变，大家还需要设置height:auto，使图片高度与宽度成比例缩放。

通过以上代码，大家就能够轻松控制图片大小了。举个例子，如果大家想将一张图片缩小至宽度为500px，在CSS文件中可以这样写：

img {
max-width: 500px;
height: auto;
}

如果大家将图片宽度设置为100%，那么图片将被拉伸以填充其容器：

img {
max-width: 100%;
height: auto;
}

总之，使用CSS控制图片大小非常简单，只需要设置max-width属性和height:auto即可。这种方法不仅可以保持图片比例不变，还可以让图片在不同的屏幕尺寸下适应得更好。