css图片拉伸自适应

CSS中的图片拉伸自适应是指通过对图片元素的大小和位置控制，使其适应不同屏幕尺寸和设备的显示效果。下面将介绍几种常见的实现方式。

.img{
    width:100%; /*图片宽度占据整个父元素的宽度*/
    height:auto; /*高度根据宽度等比例缩放*/
}

上述代码中，将图片宽度设置为100%，即占据整个父元素的宽度。高度则使用auto属性，根据宽度等比例缩放，保持图片的原始比例。这种方式适用于保持图片原始比例的情况。

.img{
    width:100%; /*图片宽度占据整个父元素的宽度*/
    height:300px; /*固定图片高度*/
    object-fit: cover; /*填充整个父元素，可能会裁剪部分图片*/
}

此代码中，将图片宽度设置为100%，高度设置为固定值。使用object-fit属性，使图片填充整个父元素，可能会裁剪部分图片。此方式适用于需要填充整个区域的情况。

.img{
    width:100%; /*图片宽度占据整个父元素的宽度*/
    height:300px; /*固定图片高度*/
    object-fit: contain; /*填充整个父元素，保留完整图片*/
}

与上述方式不同的是，使用object-fit的contain属性可保留完整图片，但可能会出现空白区域。此方法适用于需要完整保留图片的情况。

通过以上介绍，可以根据实际需求选择适合的方式，实现图片拉伸自适应的效果。