img { max-width: 100%; height: auto; }
以上代码可以实现图片的横向缩小,并保持纵向比例。其中,max-width
属性指定了图片最大宽度为100%,也就是与其所在容器的宽度相等,height
属性则设置为auto
,表示高度与宽度自适应,保持纵向比例。
当然,如果大家想要让图片在不改变宽高比的情况下缩小到特定的宽度,可以使用如下代码:
img { width: 300px; /* 设定宽度为300px */ height: auto; }
以上代码将图片宽度设定为300px
,高度自适应。这样就能够有效地控制图片大小,使页面排版更加美观。