css图片不变型样式 |动态 动画 css

1. 等比例缩放

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

这样的样式能够保证图片在浏览器中显示时，能够自适应浏览器的宽度，并且不失真。但是，如果图片的高度小于浏览器的高度时，会出现空白的情况。

2. 剪裁

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

这样的样式能够保证图片在浏览器中显示时，能够填满指定的区域，并保持不变形。但是，如果图片的宽度和高度都小于指定的区域时，会出现拉伸和失真的情况。

3. 背景图片

div{
background-image: url("image.jpg");
background-size: cover;
background-repeat: no-repeat;
}

这样的样式相比前两种样式，更加灵活，可以通过调整div的width和height来控制背景图片在网页上的显示。但是，背景图片无法像前两种样式那样被搜索引擎抓取，无法实现SEO优化。