css3图片缩放 裁切

CSS3提供了很多新的属性来对图片进行缩放和裁切，以下是一些值得注意的属性。

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

其中，max-width属性可以让图片在其所在容器内的宽度不超过父元素的宽度，而height属性可以保持图片的高度与宽度的比例不变。

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

这里使用了object-fit属性，它可以控制图片的填充方式。cover表示让图片覆盖整个容器，裁切掉多余的部分。height和width属性分别控制了图片所在容器的高度和宽度。

div {
    width: 200px;
    height: 200px;
}
div img {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    top: 0;
    left: 0;
}
    

这里通过绝对定位将图片放在一个大小为200x200的div容器内，并使用object-fit属性控制填充方式。由于图片被绝对定位，所以需要设置top和left属性来将图片定位在div容器的左上角。

以上是CSS3图片缩放和裁切的一些常用属性，我们可以根据实际需求灵活使用。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！