0
我有一個網頁，主要由各種圖像絕對定位爲拼貼。現在，如果用戶調整頁面窗口部分的大小，屏幕會出現水平滾動條。HTML/CSS/JS - 如何調整絕對定位圖像的大小？
是否有辦法讓它如此按比例調整整個拼貼比例尺，以便整個拼貼畫始終可見並且位置保持正確？ JS/JQuery解決方案可以接受。
謝謝！
body {
background: #fddfef;
font-family: 'Averia Serif Libre', cursive;
}
a{
color: #fea6d5;
}
.header{
position: absolute;
left: 0;
top: 0;
clear:both;
}
.footer{
text-align: center;
background: #fddfef;
/*font-family: 'Playfair Display', serif;*/
font-size: .5em;
position:absolute;
bottom:0;
width: 100%;
z-index: 2;
}
.Imagecontainerbg{
position: relative;
bottom: 3em;
transition: all .3s ease-in-out;
}
.Imagecontainerbg img{
transition: all .3s ease-in-out;
}
.Imagecontainerbg img:hover{
transform: scale(1.03);
}
#grass{
position: absolute;
top: 13.7em;
left: 0.9em;
}
#fanguitar{
position: absolute;
top: 10.7em;
left: 11.5em;
}
#twodudes{
position: absolute;
top: 41.0em;
left: 13.5em;
}
#kid{
position: absolute;
top: 35.3em;
left: 26.8em;
}
#equipment{
position: absolute;
top: 11.7em;
left: 28.8em;
}
#fish{
position: absolute;
top: 20.5em;
left: 45.8em;
}
#pipe{
position: absolute;
top: 5.0em;
left: 60.8em;
}
#jesus{
position: absolute;
top: 29.8em;
left: 60.8em;
}
.biocolumn {
position: absolute;
display: inline-block;
top:22.0em;
left: 0.9em;
transition: all .3s ease-in-out;
}
.biocolumn:not(.biocontent > p):hover{
z-index: 1;
transform: scale(1.01);
cursor: pointer;
cursor: hand;
}
.bioimg:hover{
cursor: pointer;
cursor: hand;
}
.musiccolumn {
position: absolute;
transition: all .3s ease-in-out;
top:22.9em;
left: 29em;
}
.musiccolumn:hover{
transform: scale(1.02);
z-index: 1;
}
.tourcolumn {
position: absolute;
top:33em;
left: 42em;
transition: all .3s ease-in-out;
}
.tourcolumn:not(.tourcontent > p):hover{
z-index: 1;
transform: scale(1.02);
}
.tourimg:hover{
cursor: pointer;
cursor: hand;
}
.contactcolumn{
position: absolute;
transition: all .3s ease-in-out;
top:18em;
left: 60.5em;
}
.contactcolumn:hover{
transform: scale(1.02);
}
.albumcolumn{
position: absolute;
transition: all .3s ease-in-out;
top:8.0em;
left: 42.0em;
}
.albumcolumn:hover{
z-index: 0;
transform: scale(1.02);
}
.biocontent{
display: none;
width:320px;
text-align: left;
position: relative;
font-size: 1em;
left:30em;
bottom: 20.6em;
}
.tourcontent{
display: none;
width:320px;
text-align: left;
position: relative;
font-size: 1em;
top: -23em;
}<!DOCTYPE html>
<html lang="en">
<head>
<!-- Fonts -->
<link href="https://fonts.googleapis.com/css?family=Playfair+Display" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Averia+Serif+Libre" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<!-- Meta -->
<meta charset="UTF-8" />
<title></title>
<link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon">
<!-- Styles -->
<link rel="stylesheet" href="style.css">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
</head>
<body>
<div class="header"><a href="index.html"><img src="images/signature.png" id="headerimg"></a></div>
<div class="Imagecontainerbg">
<!--<img src="images/bg.png" class="bgimage">-->
<!--<img src="images/grass.jpg" id="grass"> -->
<img src="images/fanguitar.jpg" id="fanguitar">
<!--<img src="images/twodudes.jpg" id="twodudes">-->
<img src="images/kid.jpg" id="kid">
<img src="images/equipment.jpg" id="equipment">
<img src="images/fish.jpg" id="fish">
<img src="images/pipe.jpg" id="pipe">
<img src="images/jesus.jpg" id="jesus">
<div class="biocolumn">
<img src="images/bio.jpg" class="bioimg">
<div class="biocontent">
<p class="about">The product of a suburban New England upbringing, where he discovered the joys of balanced breakfasts and quiet nights spent under the stars, Emmett McCleary writes earnest music for earnest people. Informed by 60s and 70s pop, his songwriting is direct without being obvious, and at its best recalls songsmiths like Neil Finn and Elliott Smith. His debut LP There’s a Better Something was recorded at home between semesters at Montréal’s McGill University; as of winter 2017 McCleary is readying the album for release and feels ambivalent about his arts degree. Emmett makes a mean Bolognese sauce and does not smoke cigarettes.</p>
</div>
</div>
<div class="tourcolumn">
<img src="images/tour.jpg" class="tourimg">
<div class="tourcontent">
<p class="tourdates">Tour Date<br>etc2<br>etc3<br>etc4<br>etc5</p>
</div>
</div>
<div class="musiccolumn">
<a href="" target="_blank"><img src="images/music.jpg" class="musicimg"></a>
</div>
<div class="musiccolumn">
<a href="" target="_blank"><img src="images/music.jpg" class="musicimg"></a>
</div>
<div class="albumcolumn">
<a href="TBD"><img src="images/album.jpg" class="albumimg"></a>
</div>
<div class="contactcolumn">
<a href="mailto:test.com"><img src="images/contact.jpg" class="contactimg"></a>
</div>
</div>
<div class="footer">
<a href="https://www.facebook.com/emmettmccleary/" target="_blank"><img src="images/facebook.png" height="15" width="15"></a>
<a href="https://www.instagram.com/emmettmccleary/" target="_blank"><img src="images/instagram.png" height="15" width="15"></a>
<a href="https://twitter.com/emmettmccleary" target="_blank"><img src="images/twitter.png" height="15" width="15"></a>
<p>© Footer </a>.</p></div>
<script src="index.js"></script>
</body>
</html>
我會將所有內容都包裝在一個容器中，並偵聽窗口大小調整，然後在調整窗口大小時更改容器的寬度。 – garek007
@ garek007只需以％形式設置通用寬度和高度就簡單多了。 –
@TyQ。你是對的。那是我一開始的想法，然後由於某種原因我去了JQuery路線。我完全分開，你可以用CSS做這個。 – garek007