HTML 和 CSS 图像未停留在框内

Question

最近我一直在尝试在我的网站上制作一个游戏页面，它显示我的图标，以及你可以点击它们的所有游戏。但最近我在尺寸方面遇到了麻烦，并将它们放在"方框">或"；大纲">我使用CSS制作。

这是我的CSS代码(对于盒子(：

.outline {
position: absolute;
height:90%;
top:30%;
left:6%;
box-shadow: 0 0 100px rgba(0,0,0,0.9) inset;
background: url("../assets/backg.png") no-repeat center;
background-color: #3156a0;
border-radius: 25px;
transition: all 0.7s;
}
/* OUTLINE GAME LINKS  */
.gamelinkss {
top:15%;
left:6%;
width: 100%;
max-width: 500px;
}

<!-- BOX WITH LINKS -->
<div class = "outline">
<!-- LINKS -->
<div class="gamelinkss">
<a href="https://www.roblox.com/games/1076861807/Cocoa-Demo-CHAPTER-8">
<img alt = "Cocoa" src = "https://raw.githubusercontent.com/ConstantineLinardakis/OfficialWebsite/main/src/assets/CocoaIcon.jpg"
style="width:200px;height:200px;">
</a>
<a href="https://www.roblox.com/games/5270744430/Vibe-House">
<img alt = "Vibe" src = "https://raw.githubusercontent.com/ConstantineLinardakis/OfficialWebsite/main/src/assets/VIBEHOUSE%20ICON.png"
style="width:200px;height:200px;">
</a>
<a href="https://www.roblox.com/games/4464933320/Beat-Saber-ALPHA">
<img alt = "Saber" src = "https://raw.githubusercontent.com/ConstantineLinardakis/OfficialWebsite/main/src/assets/beat%20saber%20icon%20finished.jpg"
style="width:200px;height:200px;">
</a>
<a href="https://www.roblox.com/games/5027869898/Ninjago-Tycoon-NEW">
<img alt = "Ninjago" src = "https://raw.githubusercontent.com/ConstantineLinardakis/OfficialWebsite/main/src/assets/Ninjago%20Icon.png"
style="width:200px;height:200px;">
</a>
<a href="https://www.roblox.com/games/5693597867/Sniper-Simulator-Advanced">
<img alt = "Sniper" src = "https://raw.githubusercontent.com/ConstantineLinardakis/OfficialWebsite/main/src/assets/SNIPER%20ICON%20FINAL.png"
style="width:200px;height:200px;">
</a>
<a href="https://www.roblox.com/games/5651722790/Coconut-Tycoon-NEW">
<img alt = "Tycoon" src = "https://raw.githubusercontent.com/ConstantineLinardakis/OfficialWebsite/main/src/assets/CocoonutTycoonIcon.jpg"
style="width:200px;height:200px;">
</a>
<a href="https://www.roblox.com/games/5100410493/Freddy-ALPHA">
<img alt = "Freddy" src = "https://raw.githubusercontent.com/ConstantineLinardakis/OfficialWebsite/main/src/assets/freddyicon.png"
style="width:200px;height:200px;">
</a>
<a href="https://www.roblox.com/games/5431394008/TwinPlayzDev-YTs-Place-Number-37">
<img alt = "StarWars" src = "https://raw.githubusercontent.com/ConstantineLinardakis/OfficialWebsite/main/src/assets/New%20Logo.jpg"
style="width:200px;height:200px;">
</a>
<a href="https://www.roblox.com/games/4990774541/Moonlight-Clicker-Remastered">
<img alt = "CaseClick" src = "https://raw.githubusercontent.com/ConstantineLinardakis/OfficialWebsite/main/src/assets/CaseCLICKICON.jpg"
style="width:200px;height:200px;">
</a>
</div>
<!-- STYLE -->
<p style = "color: transparent;"></p>
</div>

这可能是因为我在HTML中设置了width和height吗？

我仍然在挣扎和疑惑。我想让这些游戏都能放在盒子里，然后让它在需要的时候每个图标都会随着盒子缩小。所以我想你可以说它不适合"概述">框。

如果您想查看，请链接到网站：https://constantinelinardakis.github.io/OfficialWebsite/Games.html

Answer 1

我相信这应该是你尝试做的事情的一个好的开始

.gamelinkcss {
padding: 1em;
grid-template-columns: repeat(auto-fill, 200px);
display: grid;
grid-gap: 1em;
}

这将在容器内创建一个自动包装grid。为此，我将每个网格项设置为200px，您可能需要对其进行调整以满足您的需求。

您仍然需要根据需要将overflow设置为hidden或scroll。您还需要调整蓝色背景的父容器元素，使其非常适合，但这应该能满足您的需要。

Answer 2

你可以试试这个

.outline {
position: absolute;
height:fit-content;
width:100%;
top:30%;
left:6%;
box-shadow: 0 0 100px rgba(0,0,0,0.9) inset;
background: url("../assets/backg.png") no-repeat center;
background-color: #3156a0;
border-radius: 25px;
transition: all 0.7s;



}
/* OUTLINE GAME LINKS  */
.gamelinkss {
top:15%;
left:6%;
height: 100%;
width: 500px;
}

<!-- BOX WITH LINKS -->
<div class = "outline">
<!-- LINKS -->
<div class="gamelinkss">
<a href="https://www.roblox.com/games/1076861807/Cocoa-Demo-CHAPTER-8">
<img alt = "Cocoa" src = "https://raw.githubusercontent.com/ConstantineLinardakis/OfficialWebsite/main/src/assets/CocoaIcon.jpg"
style="width:200px;height:200px;">
</a>
<a href="https://www.roblox.com/games/5270744430/Vibe-House">
<img alt = "Vibe" src = "https://raw.githubusercontent.com/ConstantineLinardakis/OfficialWebsite/main/src/assets/VIBEHOUSE%20ICON.png"
style="width:200px;height:200px;">
</a>
<a href="https://www.roblox.com/games/4464933320/Beat-Saber-ALPHA">
<img alt = "Saber" src = "https://raw.githubusercontent.com/ConstantineLinardakis/OfficialWebsite/main/src/assets/beat%20saber%20icon%20finished.jpg"
style="width:200px;height:200px;">
</a>
<a href="https://www.roblox.com/games/5027869898/Ninjago-Tycoon-NEW">
<img alt = "Ninjago" src = "https://raw.githubusercontent.com/ConstantineLinardakis/OfficialWebsite/main/src/assets/Ninjago%20Icon.png"
style="width:200px;height:200px;">
</a>
<a href="https://www.roblox.com/games/5693597867/Sniper-Simulator-Advanced">
<img alt = "Sniper" src = "https://raw.githubusercontent.com/ConstantineLinardakis/OfficialWebsite/main/src/assets/SNIPER%20ICON%20FINAL.png"
style="width:200px;height:200px;">
</a>
<a href="https://www.roblox.com/games/5651722790/Coconut-Tycoon-NEW">
<img alt = "Tycoon" src = "https://raw.githubusercontent.com/ConstantineLinardakis/OfficialWebsite/main/src/assets/CocoonutTycoonIcon.jpg"
style="width:200px;height:200px;">
</a>
<a href="https://www.roblox.com/games/5100410493/Freddy-ALPHA">
<img alt = "Freddy" src = "https://raw.githubusercontent.com/ConstantineLinardakis/OfficialWebsite/main/src/assets/freddyicon.png"
style="width:200px;height:200px;">
</a>
<a href="https://www.roblox.com/games/5431394008/TwinPlayzDev-YTs-Place-Number-37">
<img alt = "StarWars" src = "https://raw.githubusercontent.com/ConstantineLinardakis/OfficialWebsite/main/src/assets/New%20Logo.jpg"
style="width:200px;height:200px;">
</a>
<a href="https://www.roblox.com/games/4990774541/Moonlight-Clicker-Remastered">
<img alt = "CaseClick" src = "https://raw.githubusercontent.com/ConstantineLinardakis/OfficialWebsite/main/src/assets/CaseCLICKICON.jpg"
style="width:200px;height:200px;">
</a>
</div>
<!-- STYLE -->
<p style = "color: transparent;"></p>
</div>