我有一个网页，主要包含各种图像，绝对定位为拼贴。现在，如果用户调整页面窗口部分的大小，则离开屏幕并出现水平滚动条。
有没有办法让它按比例调整整个拼贴比例尺，这样整个拼贴画总是可见的并且位置保持正确？ 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>
答案 0 :(得分：0)
您需要在容器的div中添加所有图像（容器位置：相对），并将所有图像定位为％（绝对位置），否则将所有图像大小（宽度）更改为百分比高度自动...所以当你调整屏幕大小时，所有图像都保持在同一个地方......＆＃34;，图像根据响应式网站的大小调整大小。