Question

我正在努力使图像调整大小以适应浏览器，就像使用背景图像一样。

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

＆＃13;

body{
  background: url(https://wallpapersultra.net/wp-content/uploads/8K-HD-Sunset-Pictures-588x315.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%;
}

＆＃13;

<!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://wallpaperlatest.com/wp-content/uploads/biker-destination-hd-wallpaper-latest.jpg" alt="">
<img class="cabbage" src="http://wallpaperlatest.com/wp-content/uploads/cool-latest-hd-wallpaper.jpg" alt="">
<img class="sheep" src="http://wallpaperlatest.com/wp-content/uploads/floating-island-latest-wallpaper-hd.jpg" alt="">
<img class="wolf" src="http://wallpaperlatest.com/wp-content/uploads/high-definition-latest-wallpaper.jpg" alt="">
</div>

</body>
</html>

＆＃13;

Answer 1

试试这个：

＆＃13;

function set_body_height() { // set body height = window height
    $('body').height($(window).height());
  }
  $(document).ready(function() {
    $(window).bind('resize', set_body_height);
    set_body_height();
  });

＆＃13;

  * {
    padding: 0;
    margin: 0;
  }
  .fit { /* set relative picture size */
    max-width: 100%;
    max-height: 100%;
  }
  .center {
    display: block;
    margin: auto;
  }

＆＃13;

<!DOCTYPE html>
<html>
<head>
</head>
<body>

<img class="center fit" src="http://minisoft.com.bd/uploads/ourteam/rafiq.jpg" >    

<script src="http://code.jquery.com/jquery-latest.js"></script>

</body>
</html>

＆＃13;

适合浏览器：图像调整

1 个答案: