Добавление <img> внутрь элемента flex приводит к тому, что элемент flex расширяется, несмотря на то, что изображение достаточно маленькое, чтобы поместиться внутри
Используя flexbox, я пытаюсь создать шаблон «заголовок-содержимое-нижний колонтитул» с изображением внутри раздела содержимого. Шаблон работает, как и ожидалось, пока я не помещу изображение в средний раздел содержимого. После добавления изображения раздел содержимого расширяется, выталкивая нижний колонтитул из области просмотра, несмотря на то, что изображение имеет набор свойств max-height, который делает его достаточно маленьким, чтобы не переполнять родительский контейнер, и остается пустое место. Более того, размер отображаемого изображения, по-видимому, вообще не влияет на количество места, на которое отодвигается нижний колонтитул. Нижний колонтитул смещается на одинаковое расстояние (примерно высота нижнего/верхнего колонтитула + несколько пикселей) независимо от того, установлен ли max-height изображения на 10%, 50% или 80% (но это влияет на отображаемый размер изображения!). Если я заменю изображение простым текстом divs, он также будет работать, как и предполагалось, просто изображение делает толчок.
В чем может быть причина и как исправить?
HTML:
<div class = "root">
<h2>HEADER</h2>
<div class = "contents-container">
<img src = "someImage.png" alt = "" class = "tutorial__image"/> // if this is removed pattern works fine
</div>
<h2>FOOTER</h2>
</div>
CSS (синтаксис SCSS):
.root {
width: 100%;
height: 100%;
display: flex;
flex-flow: column nowrap;
justify-content: space-between;
h2 {
height: 4rem;
margin: 0;
}
}
.contents-container {
width: 100%;
height: 100%;
flex-grow: 1;
}
.tutorial__image {
max-height: 50%; // this is low enough to leave empty space in the container. However lower/higher setting doesn't change the footer offset
max-width: 100%;
}
Это часть приложения Vue, и я использую scss, но сомневаюсь, что это имеет значение. Буду признателен за любую помощь.
К сожалению, это ничего не меняет.
Ответы 1
Мы можем избежать этой проблемы, добавляя изображение с помощью css/scss. Попробуй это
HTML
<div class = "contents-container backg-img">
//your content
</div>
Scss
.backg-img {
background-image: url("image.jpg") !important;
background-size: cover !important;
background-repeat: no-repeat;
}
Спасибо, это работает. Он устанавливает изображение в качестве фона для любого другого содержимого, но я, вероятно, могу обойти это, создав дочерний элемент div, подобный этому. Так в чем именно здесь была проблема? Почему мой код не работает?
Попробуйте display: block на своем изображении