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

【问题标题】：How to Make Image Grid Fit All Screen Resolutions?如何使图像网格适合所有屏幕分辨率？
【发布时间】：2019-02-07 08:51:49
【问题描述】：

我正在为大学制作一个网站，并且我有一个画廊，但是当调整窗口大小时，我无法让所有图像都留在页面上的相应位置。这是我的主要问题：当调整窗口大小时，每页上的所有文本和图像都相互覆盖，这太可怕了。我所有的照片都是绝对的，左侧和顶部都有百分比。我正在为我的网站建模，就像 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>

【问题讨论】：

您有绝对定位的具有百分比值的 div，但图像的高度和宽度是固定的 px 值。您还可以设置图像尺寸百分比值或至少添加一些 max-width 和 max-height 值。无论如何，不要为此使用绝对位置，请查看本指南css-tricks.com/seamless-responsive-photo-grid

标签： html css image gallery

【解决方案1】：

尝试使用 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

【讨论】：

【解决方案2】：

我认为本教程将帮助您实现您想要的： https://w3bits.com/css-masonry/ 一般使用 position:absolute 不能帮助你达到你想要的。做到这一点的唯一方法是使用 position: absolute 并以百分比形式添加宽度，但这将是一种矫枉过正的做法，您需要花费大量时间才能在所有分辨率上正确实现它，最后使用类似我发给你的链接会让你更快地得到正确的结果

【讨论】：