CSS图片

在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'); } }