img{ width: 500px; height: 300px; }
上述代码中,img代表图片元素,width代表宽度,height代表高度。通过给img设置width和height属性,就可以控制图片的大小。
当然,大家也可以只给图片设置其中一个属性,比如只设置宽度,高度会自动按比例缩放。
img{ width: 500px; /* height will be automatically adjusted based on the aspect ratio */ }
另外,大家也可以将图片的大小设置为百分比或者是视窗单位,这样图片的大小就可以随屏幕的大小自适应。
img{ width: 50%; /* the width of this image will take up half of the parent element's width */ } img{ width: 40vw; /* the width of this image will be 40% of the viewport's width */ }
总之,通过CSS的设置,大家可以轻松地控制图片的大小,以满足不同的网页布局需求。