Question

我尝试使用bootstrap将图像缩放到浏览器屏幕，就像this网站一样。

通过设置

img {
    max-width: 100%;
    max-height: 100%;
}

它确实显示完整图像，但也显示滚动。滚动通过以下方式得到反击：

body {
     overflow-y: hidden;
     overflow-x: hidden;
}

现在，问题是，我无法在屏幕上显示完整的图像。它会裁剪图像的某些部分（如果图像大于浏览器窗口）。

有人帮我吗？感谢。

Answer 1

您应该将图像的宽度和高度限制为屏幕大小。

我注意到您没有使用min-width和min-height属性，而是使用max-width和max-height

查看 JS Fiddle

请尝试以下代码：

body {
  background:url("images/your_image.jpg");      // Your Image URL
  min-height : 100%;
  min-width : 100%;
  background-size:100% 100%;
  background-repeat:no-repeat;
  overflow-y: hidden;
  overflow-x: hidden;
 }

您可以在此处找到它： JS Fiddle

希望这有帮助！

Answer 2

Bootstrap为此目的提供了内置的img-responsive类。这会将max-width: 100%;, height: auto; and display: block;应用于图像，以便它可以很好地缩放到父元素。

＆＃13;

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

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<body>
  <img class="img-responsive" src="http://digital-photography-school.com/wp-content/uploads/flickr/5661878892_15fba42846_o.jpg" />
</body>

＆＃13;

Answer 3

我今天早上一直在尝试，我终于让它发挥作用了。

以下是代码：

body {
    background: url('/yourimage.jpg') no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    color:#fff;
    background-color:#333;
    font-family: 'Open Sans', Arial, Helvetica, Sans-Serif;
}

Bootstrap图像适合屏幕

3 个答案: