时间戳

首页 > 解决方案 > 如何使图像网格适合所有屏幕分辨率？

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

问题描述

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

标签： htmlcssimagegallery

解决方案

尝试使用 Bootstrap，一个用于构建响应式网站的 CSS、HTML 和 JS 库。您可以在https://getbootstrap.com下载并查找文档和示例

基本上它将视图分为12列（称为网格系统），屏幕分为5个类别，xl（特大），lg（大），md（中），sm（小），xs（特小）；使用 CSS 类，您可以根据屏幕以及元素之间的列偏移量来决定分配给每个元素的列数，使用col-display-n 显示可以是 xl、lg、md、sm、xs 和 n 的类，从 1 到 12 的整数和offset-display-n为偏移量。

我认为这对你有帮助。Here Grid system 解释得更好

推荐阅读