FIT BROWSER：画像サイズ変更

私は、背景画像のようにブラウザに合わせて画像をサイズ変更するのに苦労しています。FIT BROWSER：画像サイズ変更

しかし、画像は画面に合わせてサイズが変更されず、ブラウザのサイズを調整しようとしました。イメージはどこにでも行きます。サイズ変更が発生したときに同じ場所に画像を残したい。私が逃したかもしれないものに関するアイデア？

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%; 
 
}

<!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>

出典

2017-08-03 Yodha

私はスニペットで一つの画像を見ることができる、または私が間違っていますか？ – Swellar

ちょうど@Swellarが私のコードを編集させてください – Yodha

これを試してみてください：

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(); 
 
    });

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

<!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>

出典

2017-08-03 07:35:43

私はちょうど@Rafiqulイスラムを使ってみました。おかげで多くの – Yodha

その作品。 plzはそれを受け入れる。 –

FIT BROWSER：画像サイズ変更

答えて

関連する問題