css中怎么截取图片大小

在CSS中，我们经常需要对图片进行裁剪或缩放，以适配我们的网页布局。这时就需要用到一些关于图片大小的属性和方法。
首先，我们可以使用max-width和max-height属性来限制图片的宽度和高度，避免图片过大导致页面效果失衡。比如：

<br>
img {<br>
  max-width: 100%;<br>
  max-height: 100%;<br>
}<br> 

这样设置之后，图片的宽度和高度都不会超过其所在容器元素的宽度和高度，同时保持原始比例。如果容器元素变小，图片也会相应缩小。
但是，有时候我们希望对图片进行精确的裁剪，以显示图片的某个区域。这时候，就可以使用CSS中的clip和object-fit属性了。
clip属性可以通过设置一组四个值，即左上角的x、y坐标和右下角的x、y坐标，来裁剪图片。比如：

<br>
img {<br>
  position: absolute;<br>
  clip: rect(0px,60px,200px,0px); /* 以左上角为原点，裁剪一个200x60的区域 */<br>
}<br> 

注意，这里需要把图片设置为绝对定位，以便clip属性生效。
object-fit属性则可以对图片的样式进行更细致的控制。它可以设置为以下几个值之一：
- fill：保持图片的原始比例，完全填充容器元素。
- contain：保持图像的原始比例，同时确保全部显示在容器元素内，可能会出现留白。
- cover：保持原始比例，裁剪图片以填充容器元素，可能会有部分图片被截去。
- none：保持原始尺寸，无论容器元素有多大。
比如：

<br>
img {<br>
  width: 200px;<br>
  height: 100px;<br>
  object-fit: cover;<br>
}<br> 

这个示例中，容器元素的尺寸为200x100，图片会被自动裁剪以填充整个容器元素。如果容器元素的尺寸变化，图片也会相应缩放和裁剪。
总之，根据具体情况选择合适的属性和方法，可以让我们更加自由地控制图片在网页中的大小和位置，从而提高页面的美观度和用户体验。