Question

我正在尝试调整图像大小以适应浏览器，就像使用

的背景图像一样

max-width:100%; height:auto; max-height:100%;

但是，图像不会调整大小以适应屏幕，我试图调整浏览器的大小。图像会随处可见。我希望在调整大小时图像保持在同一位置。关于我可能错过的任何想法？

body{
  background: url(http://www.planwallpaper.com/static/images/518169-backgrounds.jpg)no-repeat center center fixed;
 background-size: 100%;

}
.boat2{
  width: 400px;
  position:absolute; bottom: 160px; left: 800px;z-index: 1;

}
.cabbage{
  width: 150px;
position:absolute; bottom: 290px; right: 290px;z-index: 1;
}
.sheep{
  width: 150px;
  position:absolute; bottom: 300px; right: 180px;z-index: 1;
}
.wolf{
  width: 300px;
  position:absolute; bottom: 270px; right: -80px;z-index: 1;
}
img {
  max-width:100%;
 height:auto;
 max-height:100%;
}

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" type="text/css" href="style.css">

    <title>IQ River Crossing</title>

</head>
<body>
<div class="image">
<img class="boat2"src="http://www.planwallpaper.com/static/images/christmas-background.jpg" alt="">
<img class="cabbage" src="http://www.planwallpaper.com/static/images/christmas-background.jpg" alt="">
<img class="sheep" src="http://www.planwallpaper.com/static/images/christmas-background.jpg" alt="">
<img class="wolf" src="http://www.planwallpaper.com/static/images/christmas-background.jpg" alt="">
</div>

</body>
</html>

Answer 1

尝试css reset

body {
  margin: 0;
  padding: 0;
}

OR

您可以参考https://css-tricks.com/perfect-full-page-background-image/

希望有所帮助

CSS：css图像调整大小以适应浏览器

1 个答案: