Question

我得到了如下所示的简单html，我的目标是让图像完全按比例填充页面并且没有垂直滚动条。

我使用的图片https://www.dropbox.com/s/w7t8sj7e5f86s8d/Dior2d1.jpg.zip

    <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<style type="text/css">
    *{
    margin: 0;
    padding: 0;
}

</style>
</head>
<body>
<div class="mainImg"><img src="my_big_photo.jpg"></div>

</body>
</html>

Answer 1

CSS tricks have an article on this. 你想要技术2。

使用现有的HTML，您需要这样的内容：

body {
  margin: 0;
}

.mainImg {
  position: fixed; 
  top: -50%; 
  left: -50%; 
  width: 200%; 
  height: 200%;
}

.mainImg img {
  position: absolute; 
  top: 0; 
  left: 0; 
  right: 0; 
  bottom: 0; 
  margin: auto; 
  min-width: 50%;
  min-height: 50%;
}

http://jsbin.com/ekugASE/1/edit

Answer 2

html, body{
    width:　100%;
    height: 100%;
}
.mainImg{
    width:　100%;
    height: 100%;
}

.mainImg img{
    width:　100%;
    height: 100%;
}

Answer 3

是否有理由不在浏览器中加载图像而不是包含图像的html页面？通常，当有人想要用图像覆盖整个页面时，它仅用作背景图像。如果是这种情况，您可以在css / style中设置body的背景图像。

完全img标签填充页面而不创建滚动条

3 个答案: