css图像高度自适应 |css3 阴影在线工具

首先，大家需要了解一下图像自适应的概念。简单来说，就是指图像能够在不变形的情况下，根据容器的大小自动调整尺寸。

下面是一个例子：

<div class="container">
<img src="example.jpg" alt="example" class="image">
</div>.container {
width: 50%;
height: 200px;
border: 1px solid #ccc;
}
.image {
width: 100%;
height: auto;
}

在这个例子中，大家设置了一个容器，宽度为50%，高度为200px，边框为1px实线灰色。内部是一个图像，src为example.jpg，替代文本为example，class为image。

在样式表中，大家设置了图像的宽度为100%，高度为auto。这就代表着图像会根据它的宽度自动适应高度，以保证不变形。

这样，大家就完成了一个简单的图像自适应设计。