Я делаю веб-сайт для колледжей и у меня есть галерея, но я не могу заставить все изображения оставаться в соответствующих местах на странице при изменении размера окна.Это моя главная проблема: когда размер окна изменяется, весь текст и изображения на каждой странице просто перекрывают друг друга, и это ужасно.Все мои фотографии являются абсолютными и имеют проценты слева и сверху.Я моделирую свой сайт так же, как Элон Маск на сайте BORING COMPANY.Можно ли как-нибудь помочь мне составить код, чтобы мои изображения на моих страницах не полностью разрушались при изменении размера окна?
Галерея скучной компании, которую я пытаюсь имитировать, также попробуйтеИзменение размера, чтобы увидеть эффект, который я хотел бы
Вот моя страница портфолио:
<!DOCTYPE HTML>
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Cabin" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<link rel="stylesheet" href="Style.css">
</head>
<body>
<title> Portfolio</title>
<div id="logo">
<img src=Myname.png" width=475px height=225px>
</div>
<table style="position:absolute;top:25%;z-index: 100;width:50%;left:25%;">
<tr>
<td><a href="Home.html"><div id="nav">HOME</div></a></td>
<td><a href="About Me.html"><div id="nav">ABOUT ME</div></a></td>
<td><a href="Portfolio.html"><div id="nav">PORTFOLIO</div></a></td>
<td><a href="Extracurriculars.html"><div id="nav">EXTRACURRICULARS</div></a></td>
<td><a href="Gallery.html"><div id="nav">GALLERY</div></a></td>
<td><a href="Contact Me.html"><div id="nav">CONTACT ME</div></a> </td>
</tr>
</table>
<div class="portfoliothumbnails" id="thumbnail1"><img src="Medicine.png" width=250px height=250px></div>
<div class="portfoliotitles" id="portfoliotitle1">Lorem Ipsum</div>
<div class="portfoliotext" id="portfoliotext1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ornare lorem vitae tellus iaculis, id viverra mi pulvinar. Donec sodales commodo mi at commodo. Nullam placerat ut mauris ac maximus. Pellentesque accumsan blandit ante, in pellentesque enim fringilla sed. Nunc magna erat, bibendum et feugiat eu, consequat et leo. Cras commodo fringilla lectus, ut varius ex tempus eget. Duis ultricies, velit et tristique eleifend, velit arcu dignissim elit, sit amet mattis odio dolor ac est. Quisque accumsan convallis accumsan. Suspendisse ornare eros vel velit molestie porta. Fusce vitae euismod ante. Aenean vel justo at odio ornare finibus quis id mi. Integer congue magna non dui blandit, consectetur rhoncus lacus varius. Morbi vel massa orci. Suspendisse gravida lorem id elit mattis tincidunt.</div>
<button class="button" id="button1">Learn More</button>
<div class="portfoliothumbnails" id="thumbnail2"><img src="English.png" width=250px height=250px></div>
<div class="portfoliotitles" id="portfoliotitle2">English Esssays/Documents</div>
<div class="portfoliotext" id="portfoliotext2">A collection of my essays and analysis responses throughout my high school career in Language Arts. </div>
<button class="button" id="button2">Learn More</button>
<div class="portfoliothumbnails" id="thumbnail3"><img src="Trends.png" width=250px height=250px></div>
<div class="portfoliotitles" id="portfoliotitle3">Newspaper Publications</div>
<div class="portfoliotext" id="portfoliotext3">Some of my work in English class was published to the local township newspaper, and was framed by my parents in our living room.</div>
<button class="button" id="button3">Learn More</button>
<div class="portfoliothumbnails" id="thumbnail4"><img src="Art.jpg" width=250px height=250px></div>
<div class="portfoliotitles" id="portfoliotitle4">Creative Work</div>
<div class="portfoliotext" id="portfoliotext4">Work from English and Art such as plays, poems, drawings, photoshop work, and other forms of creative literature. The majority of this section is populated by my work from the creative writing and journalism class, Writing for Publication, I took my freshman year and Digital Arts I from my sophomore year.</div>
<button class="button" id="button4">Learn More</button>
</body>
</html>
Вот мой стиль:
#logo{position:absolute;
top:2.5%;
left:25%;}
body {
margin-left:25%;
margin-right:25%;
}
#nav{text-decoration:none;
font-size:15px;
font-family:Roboto, sans-serif;
color:black;}
a{text-decoration:none;}
* {box-sizing:border-box}
.slideshow-container {
max-width: 50%;
position: absolute;
margin: auto;
left:25%;
top:30%;
}
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
}
@-webkit-keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
@keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
#headshot{position:absolute;
top:35%;
left:20%;}
#aboutmetitle{position:absolute;
top:45%;
left:25%;
font-family:Roboto, sand-serif;
color:black;
font-weight:bold;
font-size:25px;
margin-left:20%;
margin-right:25%;}
#aboutmetext{position:absolute;
top:50%;
left:25%;
font-family:Roboto, sand-serif;
color:black;
font-size:18px;
margin-left:20%;
margin-right:25%;}
#aboutmelazar{position:absolute;
top:85%;
left:15%;}
.portfoliothumbnails{position:absolute;}
#thumbnail1{left:25%;top:35%;}
#thumbnail2{left:25%;top:65%;}
#thumbnail3{left:25%;top:95%;}
#thumbnail4{left:25%;top:125%;}
.button{ background-color: black;
border: none;
color: white;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
padding: 10px 24px;
cursor: pointer;
font-family:Roboto, sans-serif;
position:absolute;
font-weight:bold;}
.button:hover{opacity:0.7;}
#button1{top:55%;left:55%;}
#button2{top:85%;left:55%;}
#button3{top:115%;left:55%;}
#button4{top:145%;left:55%;}
.portfoliotitles{position:absolute;
color:black;
font-size:16px;
font-weight:bold;
font-family:Roboto, sans-serif;}
#portfoliotitle1{top:35%;left:40%;}
#portfoliotitle2{top:65%;left:40%;}
#portfoliotitle3{top:95%;left:40%;}
#portfoliotitle4{top:125%;left:40%;}
.portfoliotext{position:absolute;
color:black;
font-size:16px;
font-family:Roboto, sans-serif;
margin-right:25%;
}
#portfoliotext1{top:40%;left:40%;}
#portfoliotext2{top:70%;left:40%;}
#portfoliotext3{top:100%;left:40%;}
#portfoliotext4{top:130%;left:40%;}
#image1{position:absolute;top:35%;left:7.5%;}
#image2{position:absolute;top:35%;left:40%;}
#image3{position:absolute;top:35%;left:65%;}
#image4{position:absolute;top:85%;left:12.5%;}
Мне очень жальдля ввода всего этого, вот моя галерея, если это имеет значение ...
<!DOCTYPE HTML>
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Cabin" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<link rel="stylesheet" href="Style.css">
</head>
<body>
<title>Gallery</title>
<div id="logo">
<img src="Me.png" width=475px height=225px>
</div>
<table style="position:absolute;top:25%;z-index: 100;width:50%;left:25%;">
<tr>
<td><a href="Home.html"><div id="nav">HOME</div></a></td>
<td><a href="About Me.html"><div id="nav">ABOUT ME</div></a></td>
<td><a href="Portfolio.html"><div id="nav">PORTFOLIO</div></a></td>
<td><a href="Extracurriculars.html"><div id="nav">EXTRACURRICULARS</div></a></td>
<td><a href="Gallery.html"><div id="nav">GALLERY</div></a></td>
<td><a href="Contact Me.html"><div id="nav">CONTACT ME</div></a></td>
</tr>
</table>
<div id="image1"><img src="\Personal Website 3.0\Gallery\A.jpg" height=450px width=600px></div>
<div id="image2"><img src="\Personal Website 3.0\Gallery\B.jpg" height=675px width=450px></div>
<div id="image3"><img src="\Personal Website 3.0\Gallery\C.jpg" height=450px width=600px></div>
<div id="image4"><img src="\Personal Website 3.0\Gallery\D.jpg" height=800px width=450px></div>
</body>
</html>