Почему картинка вылезает за пределы блока?

Подскажите почему картинка вылезает за пределы блока a?

• Вопрос задан более трёх лет назад
• 42025 просмотров

Комментировать
Решения вопроса 2

Ankhena @Ankhena Куратор тега CSS
Нежно люблю верстку

Потому что вы задали display: inline-block;
Сделайте картинку просто блочной или задайте vertical-align: top
https://webref.ru/css/vertical-align

p.s. не используйте id для стилизации, пишите классы.

Ответ написан более трёх лет назад
Нравится 2 1 комментарий
whiteredfox @whiteredfox

Я так выровняла картинку внутри ссылки внутри текста. display: inline-block установила у img, а с высотой vertical-align: bottom помогло) Мерси.

Оптимизирую PageSpeed & Performance

Вылазит из-за того, что #header имеет line-height: 60px; а блочно-строчные элементы выровнялись по базовой линии.

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

Есть картинка, которая выходит за пределы блока, как сделать что бы та часть которая выходит за пределы блока не отображалась, т.е. картинка как бы обрубалась?

Отслеживать
задан 27 мая 2020 в 17:04
573 8 8 серебряных знаков 21 21 бронзовый знак
overflow:hidden?
27 мая 2020 в 17:05

1 ответ 1

Сортировка: Сброс на вариант по умолчанию

В стилях родительского элемента (предположим, он имеет класс parent)

.parent

Либо можно не создавать CSS файл, написать напрямую в HTML:

P.S.: Хорошей практикой считается первый вариант

Отслеживать
ответ дан 27 мая 2020 в 17:07
Андрей Рик Андрей Рик
1,661 7 7 серебряных знаков 15 15 бронзовых знаков
Спасибо большое, очень помогли, никак не мог найти.
27 мая 2020 в 17:12

• html
• css
• вёрстка

Важное на Мете

Похожие

Подписаться на ленту

Лента вопроса

Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

Дизайн сайта / логотип © 2024 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2024.1.3.2953

Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.

Как сделать чтобы img не выходил за div

У нас будут два div

Css:

Пример блока выходящего за пределы блока:

Если вы прочитали стили, то вы увидели, что наш дочерний блок выходит по ширине за пределы родительского блока на 100px(см. padding 0 50px)

И чтобы вот этот выход за пределы блока ликвидировать, то к классу «second» добавим «box-sizing: border-box;»

-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;

Результат — блок, больше не выходит за пределы родительского блока:

Блок выходит за пределы родительского блока — 2.

Еще один пример способа -запрета выхода дочернего блока за пределы родительского.

нам опять понадобится два div

Стили. смотри выше пунктом. для данного примера они аналогичные.

Если мы приведем данный пример выхода за пределы родительского блока, то увидим абсолютно аналогичную историю, что и в первом пункте:

И далее.. второму блоку присвоим свойство display со значением table-cell

.second4 <
width: 600px;
padding: 0 50px;
background: aliceblue;
border: 1px solid;
display: table-cell; >

Блок больше не выходит за пределы родительского блока:

Textarea выходит за пределы блока.

Вообще. эта страница родилась по мотивам «Textarea выходит за пределы блока.«. и множество «Textarea» находятся у меня в админке и эта история. как тот сапожник без сапог.

Ну как-же этот долбаный «Textarea» вылазит за пределы. что только не придумывай.

делаешь width 100%

И малейший padding — . опять все кривое.

Стряхнув с себя пелену сапожника. пора было решить эту задачку навсегда!

Давайте приведем пример «Textarea», который вылазит за пределы родительского блока.

Html:

.first background: #6cd81c;
width: 300px;
height: 50px;
>
.first textarea width: 100%;
padding: 0 20px;
>

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

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

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

 
GERALD
 
OF

RIVIA
 
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.
 Oficial website 

А вот часть 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

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

• Вопрос задан более трёх лет назад
• 2735 просмотров

3 комментария

Простой 3 комментария