Как мне не допустить переполнения моего изображения контейнером inline-block - PullRequest
Новая
       12

Как мне не допустить переполнения моего изображения контейнером inline-block

0 голосов
/ 02 апреля 2020

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

Я пытаюсь настроить 2 столбец имеет заголовок и текст с одной стороны и изображение с другой У меня есть изображение и текст внутри соответствующих контейнеров. Для отображения элементов div установлено значение «inline-block», и, таким образом, изображение не будет уменьшаться, чтобы поместиться в его элемент div. Есть ли простое решение для этого?

Вот код:

HTML

<div class="col">
    <h1>Header</h1>
    <p>Text</p>
</div>
<div class="col">
    <img src="images/img1.jpg" alt="Image">
</div>

CSS

.col {
    display: inline-block;
    width: 45%;
    vertical-align: top;
    margin-bottom: 20px;
}

Снова Я знаю, что это, вероятно, очень легко (или совершенно невозможно по какой-то причине), но любая помощь будет признательна.

1 Ответ

1 голос
/ 02 апреля 2020

Просто добавьте width: 100% к CSS. 

.col img {
  width: 100%;
}

Или вы можете поместить его в тег <img>: 

<div class="col">
    <img src="images/img1.jpg" alt="Image" width="100%">
</div>

Изображение будет увеличиваться пропорционально максимальная ширина родительского элемента. Если вы не укажете ширину в явном виде, она будет представлена ​​в оригинальном размере.

...