Как установить ширину и высоту изображения на 100% с помощью CSS?

Question

Мой код:

background:url(images/menu_edu.jpg) no-repeat;

Но отображается только половина изображения.

Answer 1

Элемент с фоном должен соответствовать размеру изображения.

т.е. flower.jpg = 255px x 55px

<div class="flower">
    Some text
</div>

.flower {
    background: url(flower.jpg) no-repeat;
    width: 255px;
    height: 55px;
}

Размер элемента не может быть установлен наразмеры изображения, если вы используете фон.Вы можете использовать javascript для вычисления размеров.

Или, если вам нужно повторить изображение, вы можете использовать repeat, repeat-x или repeat-y вместо фонового тега.

Answer 2

Если вы хотите отобразить изображение в полном размере, вам не нужно использовать CSS для этого

Не присваивайте атрибуту высоты и ширины тегу <img>, например <img src="this.jpg" /> будет отображаться в полном размере

Но если вы хотите, чтобы <div> показывал свой фон в полном размере, тогда нет другого выбора, кроме как назначить точные размеры изображения

Answer 3

Если вы просто хотите отобразить изображение, IMG-тег гораздо полезнее и эффективнее ... (и его можно установить на ширину (/ &) height = 100%).

Answer 4

Вы показываете недостаточно кода, но если фоновое изображение находится в элементе body, оно, вероятно, не растягивается по всему окну просмотра.

Попробуйте

html, body { min-height: 100% }