2

我有一个网站的图像，我希望调整它的大小，使其覆盖任何给定的屏幕。

笔记：

我能想到的唯一解决方案是重新调整高度和宽度的大小，但这会使滚动条出现。我猜它是我正在努力创建的 CSS 解决方案。

编辑：

这是我尝试过的代码，但它“缩放”了图片以使其在屏幕上伸展。我希望它调整它的大小，以便显示质量和实际图片。

#bg {
  position: fixed; 
  top: 0; 
  left: 0; 

  min-width: 100%;
  min-height: 100%;
}
4

6 回答 6

3

只需使用一些简单的 css

#theimg {
    position : fixed; /*can also use absolute and the parent element can have relative*/
    top : 0;
    left : 0;
    width : 100%;
    height : 100%;
}

这是一个演示小提琴

http://jsfiddle.net/rg3eK/

于 2013-09-05T18:59:46.677 回答
2

您想使用 CSS 背景属性：http ://css-tricks.com/perfect-full-page-background-image/

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;
}

工作于：

Safari 3+ Chrome What+ IE 9+ Opera 10+（Opera 9.5 支持背景大小但不支持关键字） Firefox 3.6+（Firefox 4 支持非供应商前缀版本）

于 2013-09-05T18:57:36.350 回答
2

将其锚定到两侧并将大小设置为auto。

img#fullscreen {
    height:auto;
    width:100%;
    left:0;
    right:0;
    top:0;
    position:absolute;
}

工作小提琴。

这不会调整到底部（链接页面上的那个也不会），但也不会弄乱图像的方面。

于 2013-09-05T19:01:43.340 回答
0

您可能需要检查照片调整大小选项。

或者您可以尝试添加以下内容：-

<img src="picture.jpg" width="100%" alt="">

即，如果您只设置图像的一个维度，则另一个最终将与它成比例。

或这个：-

#image{
min-width:100%;
min-height:100%;
height:auto;
width:auto;
left:0;
right:0;
bottom:0;
top:0;}
于 2013-09-05T18:57:02.727 回答
0

background-size: cover在元素上的CSS中使用HTML

html {
    background: url(http://i.imgur.com/tENv1w4.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
       -moz-background-size: cover;
         -o-background-size: cover;
            background-size: cover;
}

看到这个小提琴：

jsFiddle

于 2013-09-05T19:08:48.513 回答
0

为了更好的 css.you 必须使用这个

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;
}
于 2014-09-07T15:57:01.820 回答