在CSS中很多方法来处理和布局图片，例如使用CSS来创建圆角图片和椭圆形图片。这可以通过设置border-radius属性来实现；还可以使用border属性来创建缩略图。另外，CSS还可以采用响应式设计，实现自动适配各种尺寸的屏幕。
一、圆角图片
1、圆角图片
使用border-radius属性创建圆角图片：
img {
border-radius: 8px;
}
2、椭圆形图片
使用border-radius属性来创建椭圆形图片：
img {
border-radius: 50%;
}
二、缩略图
使用 border 属性来创建缩略图：
img {
border: 1px solid #ddd;
border-radius: 4px;
padding: 5px;
}
<img src="paris.jpg" alt="Paris">
三、响应式图片
1、使用 width 属性
如果 width 属性设置为 100%，图片会根据上下范围实现响应式功能：
img {
max-width: 100%;
height: auto; }
2、网页添加图片
img {
width: 100%;
height: auto; }
四、背景图片
背景图片可以响应调整大小或缩放。以下是三个不同的方法：
1. 如果 background-size 属性设置为 contain, 背景图片将按比例自适应内容区域。图片保持其比例不变：
div {
background-repeat: no-repeat;
background-size: contain; }
2、如果 background-size 属性设置为 “100% 100%” ，背景图片将延展覆盖整个区域：
div {
background-size: 100% 100%; }
3. 如果 background-size 属性设置为 cover，则会把背景图像扩展至足够大，以使背景图像完全覆盖背景区域：
div {
background-size: cover;
border: 1px solid red;}
五、图片滤镜
CSS中 filter 属性用为元素添加可视效果 (例如：模糊与饱和度) 。
修改所有图片的颜色为黑白 (100% 灰度):
img {
-webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */
filter: grayscale(100%);
}
注意：Internet Explorer 或 Safari 5.1 (及更早版本) 不支持该属性。
六、卡片式图片
示例：
div.polaroid {
width: 80%;
background-color: white;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
img {width: 100%}
div.container {
text-align: center;
padding: 10px 20px;
}
七、响应式图片相册
示例：
.responsive {
padding: 0 6px;
float: left;
width: 24.99999%;
}
@media only screen and (max-width: 700px){
.responsive {
width: 49.99999%;
margin: 6px 0;
}
}
@media only screen and (max-width: 500px){
.responsive {
width: 100%;
}
}
八、自适应图片
没有必要在小屏幕上去加载大图片，这样很影响加载速度，所以我们可以使用媒体查询，根据不同的设备显示不同的图片。
示例：
/* For width smaller than 400px: */
body {
background-image: url('img_smallflower.jpg');
}
/* For width 400px and larger: */
@media only screen and (min-width: 400px) {
body {
background-image: url('img_flowers.jpg'); } }
可以使用媒体查询的 min-device-width 替代 min-width 属性，它将检测的是设备宽度而不是浏览器宽度。浏览器大小重置时，图片大小不会改变。
/* For width smaller than 400px: */
body {
background-image: url('img_smallflower.jpg');
}
/* For width 400px and larger: */
@media only screen and (min-width: 400px) {
body {
background-image: url('img_flowers.jpg'); } }
