img { width: 100%; height: auto; }
上述代码中,大家将图片的宽度设置为100%,表示图片占据父容器的所有可用宽度,而高度则设置为auto,这样可以根据图片的宽度自适应计算高度,从而避免了图片拉伸变形的问题。
此外,如果大家想让所有图片的大小保持一致,可以通过给所有图片添加相同的类名,并在CSS样式中设置宽度和高度相同,如下所示:
<img class="img-item" src="img1.jpg"> <img class="img-item" src="img2.jpg"> /* CSS样式 */ .img-item { width: 200px; height: 200px; }
这样做可以确保所有图片都以相同的尺寸呈现,使页面看起来更加整齐美观。