jsFiddle

Question

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

注意：

我不希望滚动条出现。
我想尝试类似以下网站的内容

http://frontrow-demo.squarespace.com/

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

编辑：

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

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

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

Answer 1

只需使用一些简单的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/

Answer 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无论如何+ IE 9+ Opera 10+（Opera 9.5支持背景大小但不支持关键字） Firefox 3.6+（Firefox 4支持非供应商前缀版本）

Answer 3

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

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

Working fiddle.

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

Answer 4

您可能需要查看photo-resize选项。

或者您可以尝试添加： -

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

Answer 5

在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

Answer 6

为了更好的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;
}

如何调整图像大小以使其适合整个窗口？

6 个答案:

jsFiddle