Как сделать так, чтобы изображение занимало всю высоту и ширину div?

Question

Как сделать так, чтобы изображение занимало всю высоту и ширину div?

0

У меня есть следующий элемент заголовка:

<div class="header">
    <div class="row">
        <div class="col-md-8 col-xs-12">
            <h3 class="heading">Heading info here</h3>
            <p>...</p>
        </div>
        <div class="col-md-4 hidden-xs header-image"></div>
    </div>
</div>

с этим стилем:

.header-image {
    background-image: url("../img/email.jpg");
}

но изображение не захватывает весь div, на самом деле, когда я смотрю на него в Chrome Inspector, он имеет высоту 1 пиксель и ширину 380 пикселей

Как заставить его обрабатывать всю ширину и высоту div без заполнения или полей?

jcm 03 март 2014, в 01:55

Источник

0

убедитесь, что .header-image имеет некоторую высоту. а затем примените background-size : developer.mozilla.org/en-US/docs/Web/CSS/background-size
Varinder 03 март 2014, в 00:00

Теги:

html

css

3 ответа

Ещё вопросы

убедитесь, что .header-image имеет некоторую высоту. а затем примените background-size : developer.mozilla.org/en-US/docs/Web/CSS/background-size

Josh Beam · Answer 1 · 2014-03-02T21-13-00.000Z

Опция заключается в использовании свойства background-size (однако имейте в виду, что это не поддерживается в версиях IE менее 9):

background-size: 100% 100%;

Это заполнит ширину и высоту div, но будет видна только в том случае, если div имеет собственную ширину и высоту:

.header-image {
    width: /* your width */;
    height: /* your height */;
}

voddy · Answer 2 · 2014-03-02T22-05-00.000Z

попробуйте установить свойство отображения изображения

.header-image {
background-image: url("../img/email.jpg");
display:table-cell;
}

для погружения

<div "style=display:table; text-align:center" class="col-md-4 hidden-xs header-image"></div>

проверить этот ответ

Stéphane de Luca · Answer 3 · 2014-03-02T21-23-00.000Z

Если вы хотите, чтобы вся область была покрыта при сохранении исходного соотношения сторон, вы должны использовать:

размер фона: обложка;

Если вы хотите, чтобы все изображение соответствовало размеру div, и вы не заботитесь о соотношении сторон изображения, используйте то, что @josh вам сказал

размер фона: 100% 100%;

Но, похоже, что ваш заголовок div не имеет правильной высоты в любом случае. Вы должны убедиться, что высота - это то, что вы хотите. Посмотрите правила в хромовом инспекторе, чтобы узнать, почему у него только 1px. В качестве взлома вы можете добавить высоту: 200 пикселей; или какая бы высота вам ни понадобилась в вашем классе.header.