要在div中显示图像并保持其比例不被拉伸,可以使用CSS的background-size属性设置为"contain"。以下是一个示例代码:
HTML代码:
CSS代码:
.image-container {
width: 300px; /* 设置div宽度 */
height: 200px; /* 设置div高度 */
background-image: url("image.jpg"); /* 设置背景图像的URL */
background-repeat: no-repeat; /* 禁止背景图像重复 */
background-position: center; /* 将背景图像定位在div中心 */
background-size: contain; /* 保持图像比例并适应div */
}
在上述示例中,我们通过设置div的宽度和高度来确定图像的显示尺寸。然后,我们通过background-image属性设置图像的URL,通过background-repeat属性禁止图像重复。background-position属性将图像定位在div的中心位置。最后,通过background-size属性设置为"contain",图像将保持比例并适应div的尺寸。
请将"image.jpg"替换为您自己的图像URL,并根据需要调整div的宽度和高度。
上一篇:保持图像行的高度相同
下一篇:保持图像中的插值