Растянуть блок на весь экран

@maximillian77 · Регистрация: 07.07.2014

Студворк — интернет-сервис помощи студентам

Добрый день ув. пользователи! Подскажите пожалуйста, как сделать что бы <div> в котором лежит

HTML5
1
2
3
4
5
<ul>
<li>
<a href="sample.html"><img src="sample.gif" alt="Пример"></a>
</li>
</ul>

всегда был на всю рабочую область экрана, в не зависимости от контента и размера картинки?

@Julieta · 25.11.2015, 09:27

width:100%;
height:100%; (нужно прописать у div, body, html)

@maximillian77 · 25.11.2015, 09:54 **[ТС]**

Julieta, а если это у меня слайдер, и мне нужно растянуть его на весь экран вне зависимости от контента ?

@mrBobrillo · 25.11.2015, 10:30

Уже не первый раз за последнюю неделю спрашивают данный вопрос!
Julieta Права, однако следует просто у body, html а не div, body, html прописать height: 100%, а потом у нужного вашего класса прописать height: 100%
Так же есть альтернативный способ, это прописать height: 100vh; это будет 100% экрана

@maximillian77 · 25.11.2015, 11:14 **[ТС]**

mrBobrillo, спасибо Вам, но если я div растянул на 100%,а нужно что бы в не зависимости от размера картинки, она тоже всегда была на весь экран?

@mrBobrillo · 25.11.2015, 11:35

Ну здесь чутка другая ситуация, если вы накладываете картинку на background, то без особых правил она не будет тянуться на всю ширину и высоту, можно так сделать, однако есть свои погрешности и ньюансы.
Если вы вставляете в слайдер тег img, то максимум что можно будет, это адекватно растянуть ее на 100% ширины экрана, а высота симметрично растянется вместе с шириной.
Для этого вам нужно изображениям в слайдере задать:

CSS
1
2
3
4
5
6
.slider img {
    display: inline-block;
    max-width: 100%;
    width: auto;
    height: auto;
}

@maximillian77 · 25.11.2015, 11:53 **[ТС]**

mrBobrillo , нет, не background. На стр. строиться вот такой слайдер c img ... на весь экран растянуть по высоте и ширине картинку возможно?

HTML5
1
2
3
4
5
6
7
8
9
10
11
            <div class="image-slider">
                <ul class="slider">
                    <?$i = 0;?>
                    <?foreach($ar['OFFERS'] as $path){?>
                        <li>
                            <a href="<?=$path['DETAIL_CODE']?>"><img src="<?=$path['BIG_PICTURES']['DETAIL_PICTURE']?>" title="<?php echo $path['DETAIL_TEXT']?>" alt="<?=$i?>"></a>
                        </li>
                        <?$i++;?>
                    <?}?>
                </ul>
            </div>

@mrBobrillo · 25.11.2015, 12:16

На практике наши программисты делают такие изображения прямо так:

HTML5
1
<li style="background: url(image.jpg)"></li>

И с админки выводят возможность прямо в style изменять background.

Однако если в вашем случае, скорее всего нельзя растянуть по высоте и ширине не теряя части изображения снизу. Все зависит от самого изображения, его размеров в частности. Можно задать ему жесткую ширину, а высота подтянется сама. Однако в таком случае будут проблемы с разными разрешениями экрана + если сайт будет адаптивным, то не разгребетесь с негативом!
Вывод: нельзя.

@Shakalaka · 25.11.2015, 12:37

Сообщение от mrBobrillo

Вывод: нельзя.

Неправильный вывод. Другой вопрос нужно ли это, но ТС просит растянуть картинку на весь экран и, видимо, понимает, что при "растягивании" картинка будет искажаться из-за несоблюдения пропорций, но это на его совести

HTML5
1
2
3
4
5
6
7
8
<ul class="img">
    <li>
        <img src="https://i.ytimg.com/vi/mSFTRoBY99s/hqdefault.jpg" alt="">
    </li>
    <li>
        <img src="http://www.wired.com/wp-content/uploads/2014/10/cathug.jpg" alt="">
    </li>    
</ul>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
html, body{
    margin:0;
    height:100%;
}
.img{
    height:100%;
    width:100%;
    list-style:none;
    padding:0;
    margin:0;
}
.img li{
    width:100%;
    height:100%;
}
.img img{
    display:block;
    width:100%;
    height:100%;
}

http://jsfiddle.net/shakalaka/tL26jxaL/

@mrBobrillo · 25.11.2015, 12:45

Shakalaka Не отрицаю, но скорее всего отчасти не прав, так как при height: 100% изображение просто сплюснится без симметрии по ширине. Просто какой тогда в этом смысл?

@Shakalaka · 25.11.2015, 12:50

Сообщение от mrBobrillo

как при height: 100% изображение просто сплюснится без симметрии по ширине. Просто какой тогда в этом смысл?

Оно не сплюснется, а будет во всю ширину/высоту экрана, чего ТС и просил, а какой в этом смысл нужно спрашивать у него.

@mrBobrillo · 25.11.2015, 12:52

Я в том плане, что последует деформация изображения по ширине.
Ну в общем тут спорить нечего, все друг друга поняли.

@maximillian77 · 25.11.2015, 13:22 **[ТС]**

mrBobrillo, спасибо. Нужно разбираться дальше, что бы и при ресайзе работало.

Новые блоги и статьи Все статьи Все блоги /
Символьное дифференцирование igorrr37 13.02.2026 / * Программа принимает математическое выражение в виде строки и выдаёт его производную в виде строки и вычисляет значение производной при заданном х Логарифм записывается как: (x-2)log(x^2+2) -. . .	Камера Toupcam IUA500KMA Eddy_Em 12.02.2026 Т. к. у всяких "хикроботов" слишком уж мелкий пиксель, для подсмотра в ESPriF они вообще плохо годятся: уже 14 величину можно рассмотреть еле-еле лишь на экспозициях под 3 секунды (а то и больше),. . .	И ясному Солнцу zbw 12.02.2026 И ясному Солнцу, и светлой Луне. В мире покоя нет и люди не могут жить в тишине. А жить им немного лет.	«Знание-Сила» zbw 12.02.2026 «Знание-Сила» «Время-Деньги» «Деньги -Пуля»
SDL3 для Web (WebAssembly): Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 12.02.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами и вызывать обработчики событий столкновения. . . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 11.02.2026 Содержание блога Библиотека SDL3 содержит встроенные инструменты для базовой работы с изображениями - без использования библиотеки SDL3_image. Пошагово создадим проект для загрузки изображения. . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL3_image 8Observer8 10.02.2026 Содержание блога Библиотека SDL3_image содержит инструменты для расширенной работы с изображениями. Пошагово создадим проект для загрузки изображения формата PNG с альфа-каналом (с прозрачным. . .	Установка Qt-версии Lazarus IDE в Debian Trixie Xfce volvo 10.02.2026 В общем, достали меня глюки IDE Лазаруса, собранной с использованием набора виджетов Gtk2 (конкретно: если набирать текст в редакторе и вызвать подсказку через Ctrl+Space, то после закрытия окошка. . .

@Julieta 6 / 6 / 1 Регистрация: 19.12.2013 Сообщений: 160
	25.11.2015, 09:27
	width:100%; height:100%; (нужно прописать у div, body, html) 0

@maximillian77 5 / 5 / 5 Регистрация: 07.07.2014 Сообщений: 559
	25.11.2015, 09:54 [ТС]
	Julieta, а если это у меня слайдер, и мне нужно растянуть его на весь экран вне зависимости от контента ? 0

@mrBobrillo 49 / 42 / 25 Регистрация: 18.11.2015 Сообщений: 279
	25.11.2015, 10:30
	Уже не первый раз за последнюю неделю спрашивают данный вопрос! Julieta Права, однако следует просто у body, html а не div, body, html прописать height: 100%, а потом у нужного вашего класса прописать height: 100% Так же есть альтернативный способ, это прописать height: 100vh; это будет 100% экрана 0

@maximillian77 5 / 5 / 5 Регистрация: 07.07.2014 Сообщений: 559
	25.11.2015, 11:14 [ТС]
	mrBobrillo, спасибо Вам, но если я div растянул на 100%,а нужно что бы в не зависимости от размера картинки, она тоже всегда была на весь экран? 0

@mrBobrillo 49 / 42 / 25 Регистрация: 18.11.2015 Сообщений: 279
	25.11.2015, 12:45
	Shakalaka Не отрицаю, но скорее всего отчасти не прав, так как при height: 100% изображение просто сплюснится без симметрии по ширине. Просто какой тогда в этом смысл? 0

@mrBobrillo 49 / 42 / 25 Регистрация: 18.11.2015 Сообщений: 279
	25.11.2015, 12:52
	Я в том плане, что последует деформация изображения по ширине. Ну в общем тут спорить нечего, все друг друга поняли. 0

@maximillian77 5 / 5 / 5 Регистрация: 07.07.2014 Сообщений: 559
	25.11.2015, 13:22 [ТС]
	mrBobrillo, спасибо. Нужно разбираться дальше, что бы и при ресайзе работало. 0