以下是使用CSS添加响应式设计图像的方法
看看今天的流行网站，您肯定会看到的一种设计治疗是大屏幕跨屏背景图像。 添加这些图像的挑战之一来自于网站必须响应不同屏幕尺寸和设备的最佳做法 - 一种称为响应式网页设计的方法 。
由于您的网站布局会根据不同的屏幕尺寸进行更改和缩放，因此这些背景图片也必须相应地缩放它们的尺寸。
事实上，这些“流畅的图像”是响应式网站的关键部分之一（以及流畅的网格和媒体查询）。 这三件作品从一开始就一直是响应式网页设计的主要内容，但尽管将响应式内嵌图像添加到网站上一直相当容易（内嵌图像是作为HTML标记的一部分编码的图形），但执行与背景图像（使用CSS背景属性对页面进行样式设计）相同，长期以来一直为许多网页设计人员和前端开发人员提供了重大挑战。 值得庆幸的是，在CSS中添加“background-size”属性使这成为可能。
在另一篇文章中，我介绍了如何使用CSS3属性background-size来拉伸图像以适应窗口，但是有一种更好，更有用的方式来部署此属性。 为此，我们将使用以下属性和值组合：
background-size：cover;
封面关键字属性通知浏览器缩放图像以适应窗口，而不管窗口有多大或多小。 图像被缩放以覆盖整个屏幕，但原始比例和纵横比保持不变，防止图像本身被扭曲。
图像放置在窗口尽可能大，以便覆盖整个窗口表面。 这意味着您的页面中不会有空白点或图像上出现任何扭曲，但这也意味着根据屏幕和相关图像的纵横比可能会裁剪掉某些图像。 例如，图像的边缘（顶部，底部，左侧或右侧）可能会在图像上被切掉，具体取决于您用于背景位置属性的值。 如果将背景定位在“左上”，则图像上的任何多余部分都会从底部和右侧脱落。 如果以背景图像为中心，多余部分将从所有方面出来，但是由于这种多余部分分散开来，对任何一方的影响都会变差。
如何使用background-size：cover;
在创建背景图像时，创建一个相当大的图像是个不错的主意。 虽然浏览器可以使图像变小而不会对视觉质量产生明显影响，但是当浏览器将图像放大到比原始尺寸更大时，视觉质量会降低，变得模糊和像素化。 这样做的缺点是，当您向所有屏幕提供巨大图像时，您的页面会受到性能影响。
当你这样做的时候，一定要准备好这些图片的下载速度和网页传送 。 最后，您需要在足够大的图像大小和质量以及适合下载速度的合理文件大小之间找到愉快的媒介。
使用缩放背景图像的常用方法之一是，当您希望该图像占据页面的整个背景时，无论该页面是宽的并且正在台式计算机上查看还是小得多并正在发送到手持设备，移动设备设备。
将您的图片上传到您的虚拟主机，并将其作为背景图片添加到您的CSS中：
background-image：url（fireworks-over-wdw.jpg）;
背景重复：不重复;
background-position：center center;
background-attachment：fixed;
首先添加浏览器前缀CSS：
-webkit-background-size：cover;
-moz-background-size：cover;
-o-background-size：cover;
然后添加CSS属性：
background-size：cover;
使用适合不同设备的不同图像
尽管针对桌面或笔记本电脑体验的响应式设计非常重要，但可以访问网络的各种设备已经大幅增加，而且屏幕尺寸也随之增加。
如前所述，例如，在智能手机上加载非常大的响应背景图像不是一种有效的或带宽意识的设计。
了解如何使用媒体查询来提供适合其显示设备的图像，并进一步提高网站与移动设备的兼容性。
Jennfier Krynin的原创文章。 由Jeremy Girard编辑9/12/17