[分享]css中如何定义图片大小

在CSS中，我们可以通过给图片定义宽度和高度来控制图片的大小。具体的方法有两种：分别是使用width和height属性以及使用maxwidth和maxheight属性。 使用width和height属...

在CSS中，我们可以通过给图片定义宽度和高度来控制图片的大小。具体的方法有两种：分别是使用width和height属性以及使用max-width和max-height属性。
使用width和height属性可以直接定义图片的宽度和高度大小。例如，我们可以使用以下代码来设置图片宽度和高度为200像素：

img {
  width: 200px;
  height: 200px;
} 

另一方面，使用max-width和max-height属性可以让图片在保持原始比例的情况下缩放，直到达到指定的最大宽度和高度。例如，我们可以使用以下代码来设置图片最大宽度和高度为500像素：

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

需要注意的是，如果我们只设置其中一项属性（如只设置宽度而不设置高度），则图片会根据该属性进行缩放，而另一项属性则会根据原始比例进行计算。
最后，还需要注意的是，一般情况下，浏览器会自动缩放图片以适应容器的大小。如果我们希望图片恒定大小不被缩放，可以使用object-fit属性和object-position属性来实现。例如，我们可以使用以下代码来设置图片在容器中居中并保持原始比例：

img {
  width: 200px;
  height: 200px;
  object-fit: contain;
  object-position: center;
} 

总之，通过设置width、height、max-width、max-height、object-fit和object-position等属性，我们可以轻松地控制图片的大小和显示效果。