Как сделать так, чтобы все объекты, которые есть в моем div не выходили за его пределы?

Question

[Ernest Avakian]

У меня есть один div с картинкой-бэкграундом. Сверху нее я хочу сделать h1 заголовок в левой верхней части, далее параграф с описанием в левой центральной части, затем кнопку с ссылкой слева внизу. А справа вставить png картинку. Суть в том, что я хочу, чтобы эта картинка не выходила за пределы моего div. Когда я просто настраиваю ее расположение margin, она(png картинка) при изменении размера окна браузера меняет положение и выходит за рамки или смещается. По сути такая же проблема и с текстом, заголовком и ссылкой.

вот часть моего HTML

<div class="heroes">
                <h1 class="hero-name">GERALD</h1> <br><h2 class="hero-name-2">OF</h2><br><h1 class="hero-name">RIVIA</h1>
                <img class="gerald" src="img/gerald.png">
                <p class="hero-story">Geralt of Rivia is a witcher and the main protagonist of the Witcher series by Andrzej Sapkowski and its adaptations, including The Witcher (PC), The Witcher 2: Assassins of Kings, and The Witcher 3: Wild Hunt video games. Like all witchers, Geralt is a monster hunter for hire. He possesses superhuman abilities and is a master swordsman. During the Trial of the Grasses, Geralt exhibited unusual tolerance for the mutagens that grant witchers their abilities. Accordingly, Geralt was subjected to further experimental mutagens which rendered his hair white and may have given him greater speed, strength, and stamina than his fellow witchers.</p>
                <a href="http://thewitcher.com/en/witcher3">Oficial website</a>
            </div>

А вот часть CSS связанного в этим div

.heroes {
    background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url(img/hero-back-1.jpg);
    background-size: cover;
    background-position: center;
    height: 100vh;
}

.hero-name {
    font-size: 300%;
}

.hero-name-2{
    font-size: 200%;
}
.gerald {
    display: block;
    width: 30%;
    height: auto;
    margin: -290px 0 0 800px;
    
}

Надеюсь, что объяснил суть проблемы более или менее понятно:)
И напишите, пожалуйста, подробное решение, насколько это возможно:)

Comments

[Сергей Герасимов]

Вы сами выносите за пределы блока картинку, при этом задаёте ей статичный отступ по высоте 290px. Поскольку её ширина зависит от ширины вашего блока, то высота становится меньше 290px, и естественно создаётся ощущение выхода из блока.

Если вам необходимо чтобы картинка выходила, то решается это с помощью position: absolute; для картинки и смещения от низа блока bottom: 100%;, и не забывайте про position: relative; для самого блока.

Иначе убирайте отрицательный margin или подбирайте его значение динамически, например, в процентах.

[Ernest Avakian]

Сергей Герасимов,

Прописал то, что вы сказали, но картинка теперь выше моего div. Она как раз над ней
Я пробовал вместо "bottom" писать 'top' (не знаю, зачем, просто экпериментировал) и в этом случае картинка вообще была в самом низу сайта.
Я новичок, поэтому еще плохо разбираюсь в верстке, за что извиняюсь:)

вот мой CSS код

.heroes {
    background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url(img/hero-back-1.jpg);
    background-size: cover;
    background-position: center;
    height: 100vh;
    position: relative;
}

.hero-name {
    font-size: 300%;
}

.hero-name-2{
    font-size: 200%;
}
.gerald {
    display: block;
    width: 40%;
    bottom: 100%;
    position: absolute;
    
}

[Сергей Герасимов]

Ernest Avakian, посмотрел на десктопе что получается. Теперь понятно.

Вам необходимо задать для изображения:

.gerald {
    width: 40%;
    top: 10px;
    left: 10px;
    position: absolute;
}

Соответственно укажите свои размеры.
Но это решение не адаптивное.

Есть вариант - изображение разместить перед именем, и тогда вам поможет обтекание справа:

.gerald {
    display: block;
    width: 30%;
    height: auto;
    float: right;
    margin-top: 10px;
    margin-right: 10px;
}

Answer 1

[Максим]

не указывать явно высоту ... можно написать min-height но не height

Comments

[Ernest Avakian]

Можно поподробней, пожалуйста

[Максим]

Ernest Avakian, ну как ещё подробнее написать ? я же сказал не указывать высоту контейнеру , тогда он будет точно по содержимому

[Ernest Avakian]

Максим Ленский, понял, спасибо!

Answer 2

[Дмитрий]

.gerald {
max-width: 100%;
}

Comments

[Ernest Avakian]

Картинка просто стала своего стандартного размера