Есть ли способ сделать изображение на всю ширину и высоту? - PullRequest
Новая
       26

Есть ли способ сделать изображение на всю ширину и высоту?

2 голосов
/ 03 февраля 2012

Мне бы хотелось масштабируемое / гибкое полноэкранное встроенное изображение (без обрезки), которое позволяло бы размещать контент под ним, как и любую другую веб-страницу.Это возможно?Все, что я продолжаю видеть, это решения для положения: исправлено;что, не возможно для меня.

Я играл с кодом по адресу: http://css -tricks.com / perfect-full-page-background-image-image / но изменение их, чтобы сделать то, что я хочу, похоже, не работает.Масштабирование изображения все неправильно и часто обрезает изображение, что опять-таки не то, что я хотел бы сделать.

Вот код для грубой идеи: 

<!DOCTYPE html>

<html>
<head>
<title></title>
</head>

<body>
<!-- full width and height image -->
<div id="feature-wrapper">
   <img src="img/feature.jpg"/>
</div>
<!-- /end fullwidth/height image -->

<!-- lots of content that sits directly beneath big image -->
<img src="img/about-mug.jpg"/>

<img src="img/project1.jpg"/>

<p>Some more content beneath feature</p>

</body>
</html>

Любые указатели приветствуются.Решения jQuery приветствуются:)

1 Ответ

4 голосов
/ 03 февраля 2012 
#feature-wrapper img {
    width  : 100%;
    height : auto;
}

Это позволит сохранить изображение встроенным в остальное содержимое; большее изображение будет выдвигать содержимое ниже, чем меньшее (в зависимости от размера экрана). Это также сохранит пропорции изображения без изменений.

Вот демонстрационная версия: http://jsfiddle.net/qzvXa/ (обратите внимание, как размер изображения изменяется, а содержимое ниже изменяется по мере изменения размера страницы)

Обновление

Ссылка, которую вы предоставили, предназначена для создания полноэкранного фонового изображения. Если вы хотите это сделать, но сохраняете соотношение сторон своего изображения, тогда вы можете установить контейнер изображения на position : absolute или position : fixed и при этом сохранить соотношение сторон. для изображения: 

/*set our fullscreen background image's width/height and z-index to something low*/
#feature-wrapper img {
    width   : 100%;
    height  : auto;
    z-index : 1;
}

/*set our container's z-index to the same as the image it contains and make this element stretch the whole page*/
#feature-wrapper {
    z-index  : 1;
    position : absolute;
    top      : 0;
    left     : 0;
    right    : 0;
    bottom   : 0;
}

/*you have to make sure your content will actually display over the background image,
`position : relative` is necessary because z-index isn't applied to elements with `position : static`*/
img, p {
    position : relative;
    z-index  : 2;
}

Вот демоверсия: http://jsfiddle.net/qzvXa/1/

...