如何使图像网格适合所有屏幕分辨率？

时间：2019-02-06 22:47:38

标签： html css image gallery

我正在为大学建立一个网站，并且有一个画廊，但是当调整窗口大小时，我无法使所有图像停留在页面上的相应位置。那是我的主要问题：调整窗口大小时，每页上的所有文本和图像都相互覆盖，这太可怕了。我所有的照片都是绝对的，左上角都有百分比。我正在为网站建模，就像埃隆·马斯克（Elon Musk）的BORING COMPANY网站一样。可以通过任何方式帮助我起草一些代码，以使调整窗口大小时页面上的图像不会完全消失吗？

The Boring Company Gallery I'm Trying to mimic, Also Try Resizing to see the effect I'd like

这是我的投资组合页面：

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

2 个答案:

答案 0 :(得分：0)

尝试使用Bootstrap（一个CSS，HTML和JS库）来构建响应式网站。 您可以在https://getbootstrap.com

下载它并找到文档和示例。

基本上，它将视图分为12列（称为网格系统），屏幕分为5类，xl（超大），lg（大），md（中），sm（小），xs（超小）;使用CSS类，您可以使用类col-display-n来决定要分配给每个元素的列数，具体取决于屏幕以及元素之间的列偏移量 其中display可以是xl，lg，md，sm，xs和n，其整数为1到12，offset-display-n为偏移量。

我认为这对您有帮助。 Here Grid system is explained better

答案 1 :(得分：0)

我认为本教程将帮助您实现所需的目标： https://w3bits.com/css-masonry/ 通常使用position：absolute无法帮助您实现所需的目标。做到这一点的唯一方法是使用位置：绝对值并以百分比形式增加宽度，但这是一个矫kill过正，要花费所有时间才能在所有分辨率上正确实现它，最后使用诸如我发送给您的链接会更快地为您提供正确的结果

相关问题
最新问题