css 图片 宽度优先 高度裁剪

CSS是一种用于排版和布局网页的标记语言。在CSS中，可以控制图片的大小和裁剪方式，以适应不同的屏幕尺寸和网页布局。

其中，一种常用的调整图片大小的方法是使用宽度优先，即限定图片的宽度，让高度按照比例缩放。这可以通过CSS属性max-width来实现：

img {
  max-width: 100%;
  height: auto;
}

上面的代码中，max-width被设置为100%，表示图片的最大宽度为其所在父元素的宽度。当图片的宽度超过这个值时，会按照原图比例缩小，以适应容器的大小。

同时，为了保持图片的比例，需要将height属性设置为auto，这样高度会按照宽度的比例自动计算。

然而，有时候图片的高度会太长，导致整个页面布局混乱。这时候可以考虑使用高度裁剪的方法，将图片的高度限制在一个固定值内，并且让宽度自适应。这可以通过CSS属性object-fit和height来实现：

img {
  width: 100%;
  height: 300px;
  object-fit: cover;
}

上面的代码中，height属性被设置为300px，表示图片的高度被限制在这个值内。同时，width被设置为100%，表示宽度会自适应容器的大小。

为了让图片填满整个容器，并且不失真，还需要用到object-fit属性。这个属性可以设置图片在容器中的适配方式，cover表示图片按比例缩放，以覆盖整个容器，同时裁剪超出部分。

总之，在使用CSS布局网页时，控制图片大小和裁剪是非常重要的一部分。上面介绍了宽度优先和高度裁剪两种常用的方法，可以根据具体情况进行选择。