如何使用css调整图像大小？

Question

我已经使用css几年但从未冒险过去使用固定宽度布局。我正在考虑为我的下一个网站使用流畅的布局，或尽可能多的百分比，但我有一个让我担心的问题。

如果我将宽度为1900px的图像设置为背景，我知道当浏览器调用1600px时，它会缩小。

当分辨率要求2000px宽度时会发生什么？我会留下白色空间，对吗？怎么能避免这种情况？我觉得我应该抛出它不是一个可以水平重复的图像。

Answer 1

通常使用的技巧是让图像用颜色“内部发光”，然后将背景颜色设置为相同。

假设您的图像没有平铺，并且具有黑色的“内部发光”或“羽毛”效果，那么您可以将容器的背景颜色设置为：

background-color: #000;
background-image: url(your_bgimage.jpg); /* image with black borders due to effect */
background-repeat: no-repeat;
background-position: center center;

Answer 2

对于我的项目，我为背景图像设置了目标最大宽度。比如说，例如1900像素。在Photoshop中，我会将内部阴影应用于我想要的页面背景。这将使图像看起来“淡入”整个文档。但是，这只是我的方式。其他方法也很有效，例如媒体使用查询。