Question

这是我测试项目的网站：http://www.rojje.com/。如果你想看看我想要实现的目标，那就使用用户名：＆＃34; test＆＃34;密码：＆＃34;密码＆＃34;或创建一个新用户。登录后的第一页是带有我想要缩放的图像的页面。

编辑：我找到了解决方案，但它仅在我使用top:0时有效，如果我删除top:0，则会移除图片底部的部分。

如果你删除top:0，你会看到图片后面的内容：http://jsfiddle.net/g9hh6qvb/

Answer 1

您可以在css中定义背景图片，并将背景尺寸设置为＆＃39; cover＆＃39;或者＆＃39;包含＆＃39;，请参阅：

https://developer.mozilla.org/en-US/docs/Web/CSS/background-size

请注意，您提供的示例是使用Flash制作的。

Answer 2

尝试使用背景附件：滚动，同时在设置样式时使用 background-size：cover 设置背景尺寸。根据文档描述，它将背景附加到元素本身，因此重新调整元素大小也应该重新调整背景图像的大小。

Answer 3

您可以使用CSS background-size属性＆＃39; Cover＆＃39;如上所述，如果您的图像被设置为div的背景。如果您在HTML中使用<img/>标记，则还可以（请参阅下面的两个示例）：

CSS：

html,body{
  margin:0;
  height:100%;
}

.section{
  width:100%;
  height:100%;
  display:block;
  float:left;
  position:relative;
  overflow:hidden;
  background:purple;
}

.section:first-child img{
    position:absolute;
    top:50%;
    min-height:100%;
    display:block;
    left:50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    min-width:100%;  
}

div:nth-child(3){
      background: url("http://th02.deviantart.net/fs42/PRE/f/2009/133/a/0/Rainy_Landscape_STOCK_by_wyldraven.jpg")no-repeat fixed center;
      background-size:cover;
}

HTML：

<div class="section">
   <img src="http://th02.deviantart.net/fs42/PRE/f/2009/133/a/0/Rainy_Landscape_STOCK_by_wyldraven.jpg">
</div>
<div class="section">
</div>
<div class="section">
</div>

示例：CodePen

缩放的图像使您始终可以看到整个图像

3 个答案: