css图片不被拉伸 |css 3 rotate

CSS中的背景图片在默认情况下会被拉伸以填满其背景区域，而这往往会导致失真或潜在的视觉问题。然而，通过CSS的background-size属性，大家可以轻松地解决这一问题。 使用background-size属性，大家可以对图片进行缩放或拉伸，以适合其背景区域。可以将background-size属性设置为“cover”以拉伸图片以填满其整个背景区域，同时保持其宽高比例，而不失真。相反，可以将其设置为“contain”以缩小图像以适合其背景区域内。 例如，以下CSS代码将设置一个背景图片，并且对其进行拉伸以填满其整个背景区域：

p {
background-image: url('example.png');
background-size: cover;
}

这将确保该图片不会被拉伸或失真，并将填充整个背景区域。您可以根据需要调整background-size属性以获得所需的外观。 总之，使用background-size属性是一种有效的方法，可以确保CSS中的背景图片不会被拉伸，从而避免任何可能的视觉问题。