使用CSS内容属性设置图像并使其不可拉伸

基础概念

CSS的content属性主要用于生成内容，通常与伪元素如:before和:after一起使用。虽然content属性本身不直接用于设置图像的大小或拉伸状态，但可以通过结合其他CSS属性来实现图像的显示和控制。

类型与应用场景

伪元素生成图像：适用于需要在特定元素前后添加装饰性图像的场景。
响应式设计：通过媒体查询结合CSS属性，可以实现图像在不同屏幕尺寸下的自适应显示。

示例代码

以下是一个使用CSS伪元素:before结合content属性来设置图像并防止其拉伸的示例：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Content Image Example</title>
<style>
  .image-container {
    width: 300px;
    height: 200px;
    position: relative;
    overflow: hidden;
  }
  .image-container:before {
    content: url('path/to/your/image.jpg');
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain; /* 防止图像拉伸 */
  }
</style>
</head>
<body>

<div class="image-container"></div>

</body>
</html>