Question

当前情景： 我正在构建一个拍摄图像的应用程序，然后设置背景。我想在移动设备，桌面设备和平板电脑设备上投放此应用程序。

问题：

我想知道拉伸和显示图像的最佳方法（不涉及页面滞后）。如何整合流体设计？

代码：

我目前正在尝试这样的事情。任何改进都会有所帮助！

html { 
  background: url(images/bg.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

Answer 1

使用现代浏览器，最简单的方法是使用以下CSS：

#background-selector {
    background-image: url('image.jpg');
    background-size: cover;
}

编辑 OP已经在帖子中添加了代码，因此这可能不是最恰当的答案。

Answer 2

这取决于图像：

如果图像包含无法轻松拉伸的物体，如文字，肖像，动物或自行车等照片，则需要保留原始比例（＆＃39;纵横比＆＃39;）。

仅使用CSS有3种缩放和保持宽高比的方法 - 它们都不能在各种设备上完美运行：

＆＃39;包含＆＃39; 在侧面或底部和顶部留下间隙，具体取决于设备的大小：

body  {
    background: url(images/bg.jpg);
    background-repeat: no-repeat;
    background-position: center; 
    background-size: contain; 
}

＆＃39;封面＆＃39; 保持背景填充，但根据设备的大小放大图像 - 您将无法看到顶部和底部的一部分图像：

body  {
    background: url(images/bg.jpg);
    background-repeat: no-repeat;
    background-position: center; 
    background-size: cover; 
}

注意背景大小为CSS3，不适用于旧版本的IE

CSS2 - 第三种解决方案适用于所有浏览器，其行为类似于＆＃39; background-size：contains;＆＃39; - 当设备的视口不适合图像时，您将遇到间隙：

.img_width {
    width: 100%; 
    height: auto; 
}

标准HTML中的图像拉伸

2 个答案: