Блог

Главная - Вопросы по программированию - Изображение HTML и CSS Не остается Внутри Коробки

Изображение HTML и CSS Не остается Внутри Коробки

#html #css

Вопрос:

Недавно я пытался создать игровую страницу на своем веб-сайте, где отображались бы мои значки и все мои игры, где вы могли бы щелкнуть по ним. Но в последнее время у меня возникли проблемы с определением размеров и сохранением их внутри «Коробки» или «Контура», которые я сделал с помощью 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 ICON.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 saber icon finished.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 Icon.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 ICON FINAL.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 Logo.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>

Может быть, это потому, что я настраиваю width и height в HTML?

Я все еще борюсь и удивляюсь. Я хочу, чтобы все эти игры поместились внутри коробки, а затем сделали так, чтобы каждый значок уменьшался вместе с коробкой, когда это необходимо. Так что, я думаю, вы можете сказать, что это не вписывается в поле «КОНТУР».

Ссылка на веб-сайт, если вы хотите увидеть : https://constantinelinardakis.github.io/OfficialWebsite/Games.html

Комментарии:

1. вы указали максимальную ширину: 500 пикселей для класса gamelinkss

2. если вы хотите, чтобы высота вашего контурного поля регулировалась в зависимости от количества игр, которые вы можете добавить height: auto , ИЛИ, если вы хотите, внутри поля должна быть прокрутка для игр, которые вы можете сделать overflow-y: scroll

3. Я все еще не понимаю, что тебе нужно. Вы хотите, чтобы окно прокручивалось, если у вас слишком много значков?

4. @maxshuty Я пытаюсь сделать так, чтобы коробка оставалась на той же высоте, что и сейчас, поэтому ниже и выше нижнего колонтитула и верхнего колонтитула, чтобы все это соответствовало. Но тогда изображения/значки автоматически помещаются в это поле, и если я продолжу добавлять новые поля, я могу попробовать переполнение:прокрутку или попробовать что-то, где поля просто помещаются и уменьшаются внутри поля.

5. @ConstantineLinardakis понял. Решение, которое я опубликовал с помощью CSS-сетки, должно вам хорошо подойти. Возьмите родительский контейнер и добавьте overflow-y: scroll для прокрутки, и вы должны быть готовы к работе. Лично я бы воздержался от масштабирования в зависимости от того, сколько вы туда вложили, так как ваше приложение внезапно будет чувствовать себя по-другому каждый раз, когда вы добавляете в него что-то, как только оно будет исчерпано.

Ответ №1:

Я считаю, что это должно быть хорошим началом для того, что вы пытаетесь сделать. Вам следует больше заглянуть в CSS-сетку:

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

Это создаст автоматическую обертку grid внутри вашего контейнера. Для этого я настроил каждый элемент сетки 200px , возможно, вам потребуется настроить его в соответствии с вашими потребностями.

Вам все равно нужно будет установить overflow hidden значение » или scroll » в зависимости от ваших потребностей. Вам также нужно будет настроить родительский элемент контейнера с синим фоном, чтобы он хорошо вписывался, но это должно дать вам то, что вам нужно.

Ответ №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 ICON.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 saber icon finished.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 Icon.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 ICON FINAL.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 Logo.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>
Метки: