Тэг picture

@visitante2016 · Регистрация: 03.08.2016

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

Всем привет,

Нужно сделать простую галерею. Решил изображения расположить в теге <picture>? т.е.

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<section class="gallery">
            <picture class="picture">
                <img srcset="img/gallery/mobile1.jpg" sizes="100vw">
            </picture>
            <picture class="picture">
                <img srcset="img/gallery/mobile2.jpg" sizes="100vw">
            </picture>
            <picture class="picture">
                <img srcset="img/gallery/mobile3.jpg" sizes="100vw">
            </picture>
            <picture class="picture">
                <img srcset="img/gallery/mobile4.jpg" sizes="100vw">
            </picture>
            <picture class="picture">
                <img srcset="img/gallery/mobile5.jpg" sizes="100vw">
            </picture>
            <picture class="picture">
                <img srcset="img/gallery/mobile6.jpg" sizes="100vw">
            </picture>
        </section>

но при просмотре в браузере видны непонятные мне полосы. Вграфическом файле, который я загрузил, видна одна такая полоса. Она красного цвета. Как убрать ее?

Заранее спасибо.

@Freeze_Breeze · 03.04.2018, 00:20

visitante2016, средствами разработчика Вас учили пользоваться? Говорят он может показать проблемы верстки. И только по Вашему HTML коду мы сможем узнать в чем же у Вас там проблема, да? CSS нельзя в добавок написать?

@visitante2016 · 03.04.2018, 20:50 **[ТС]**

Извеняюсь,

В прикрепленном файле можно увидеть как браузер отображает страницу, а также HTML и CSS.

@Freeze_Breeze · 03.04.2018, 22:02

visitante2016,

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

Последний раз редактировалось mrtoxas; Сегодня в 21:05. Причина: Код приводим в текстовом виде!

Напишите код на форуме и приложите к нему изображение. (Правила форума)

@visitante2016 · 09.04.2018, 21:21 **[ТС]**

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<main class="main main-gallery">
        <h1 class="contents">То, чем владеем в совершенстве</h1>
        <section class="gallery">
            <picture class="picture">
                <img srcset="img/gallery/mobile1.jpg" sizes="100vw">
            </picture>
            <picture class="picture">
                <img srcset="img/gallery/mobile2.jpg" sizes="100vw">
            </picture>
            <picture class="picture">
                <img srcset="img/gallery/mobile3.jpg" sizes="100vw">
            </picture>
            <picture class="picture">
                <img srcset="img/gallery/mobile4.jpg" sizes="100vw">
            </picture>
            <picture class="picture">
                <img srcset="img/gallery/mobile5.jpg" sizes="100vw">
            </picture>
            <picture class="picture">
                <img srcset="img/gallery/mobile6.jpg" sizes="100vw">
            </picture>
        </section>
  </main>

Стили довольно просты

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
.main-gallery {
    width: 90%;
    margin: 0 auto;
}
.gallery {
  text-align: center;
  background-color: #E80C7A;
}
.picture {
    height: 0;
    margin: 0;
    padding: 0;
}

@golosalex · 10.04.2018, 02:59

CSS
1
2
3
4
.gallery {
  text-align: center;
  background-color: #E80C7A;
}

вот тут у вас задан фон (розовый) этот фон вы и видите. вы удалили все отступы, но надо еще учесть что картинки это inline элементы, а значит у них есть межстрочный отступ, или используйте отрицательные margin, или используйте блочное отображение картинок, но тогда центрировать Align-text не получиться, вот такое решение предлагаю:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="css.css">
</head>
<body>
<main class="main main-gallery">
        <h1 class="contents">То, чем владеем в совершенстве</h1>
        <section class="gallery">
            <picture class="picture">
                <img srcset="111.jpg" sizes="100vw">
            </picture>
            <picture class="picture">
                <img srcset="222.jpg" sizes="100vw">
            </picture>
            <picture class="picture">
                <img srcset="333.jpg" sizes="100vw">
            </picture>
            <picture class="picture">
                <img srcset="444.jpg" sizes="100vw">
            </picture>
        </section>
  </main>
</body>
</html>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
*{
    margin: 0px;
    padding: 0px;
}
 
.main-gallery {
    width: 90%;
    margin: 0 auto;
}
.gallery {
  margin: auto; 
  background-color: #E80C7A;
}
 
img{
    display: block;
    margin: auto; 
    padding: 0px;
}

я бы еще Border добавил, а зачем вы используете тег Picture? он вроде используется чтобы браузер выбирал из списка изображений подходящие под размер экрана, а у вас только одна картинка на тег.

@visitante2016 · 10.04.2018, 12:46 **[ТС]**

Привет,

Спасибо за ответ. Действительно, не учел то, что <img> это inline-элементы. Теперь, когда я их поменял на блоковые все как надо, без промежутков между фотками.

По поводу самого тэга <picture> и зачем я его использую. На скрине мобильная версия сайта, при увеличении экрана будут подгружаться фотки бОльшего разрешения. Этот тэг в реализации HTML5 позволяет сделать очень удобно.

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf 8Observer8 01.02.2026 Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .	SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .	SDL3 для Web (WebAssembly): Установка Emscripten SDK (emsdk) и CMake для сборки C и C++ приложений в Wasm 8Observer8 30.01.2026 Содержание блога Для того чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. . . .	SDL3 для Android: Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .
Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	SDL3 для Android: Загрузка PNG с альфа-каналом с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .	SDL3 для Android: Загрузка PNG с альфа-каналом с помощью SDL3_image 8Observer8 27.01.2026 Содержание блога SDL3_image - это библиотека для загрузки и работы с изображениями. Эта пошаговая инструкция покажет, как загрузить и вывести на экран смартфона картинку с альфа-каналом, то есть с. . .	Влияние грибов на сукцессию anaschu 26.01.2026 Бифуркационные изменения массы гриба происходят тогда, когда мы уменьшаем массу компоста в 10 раз, а скорость прироста биомассы уменьшаем в три раза. Скорость прироста биомассы может уменьшаться за. . .

@Freeze_Breeze 278 / 272 / 106 Регистрация: 12.01.2016 Сообщений: 1,666
	03.04.2018, 00:20
	visitante2016, средствами разработчика Вас учили пользоваться? Говорят он может показать проблемы верстки. И только по Вашему HTML коду мы сможем узнать в чем же у Вас там проблема, да? CSS нельзя в добавок написать? 0

@visitante2016 6 / 6 / 0 Регистрация: 03.08.2016 Сообщений: 152
	03.04.2018, 20:50 [ТС]
	Извеняюсь, В прикрепленном файле можно увидеть как браузер отображает страницу, а также HTML и CSS. Миниатюры 0

@visitante2016 6 / 6 / 0 Регистрация: 03.08.2016 Сообщений: 152
	10.04.2018, 12:46 [ТС]
	Привет, Спасибо за ответ. Действительно, не учел то, что <img> это inline-элементы. Теперь, когда я их поменял на блоковые все как надо, без промежутков между фотками. По поводу самого тэга <picture> и зачем я его использую. На скрине мобильная версия сайта, при увеличении экрана будут подгружаться фотки бОльшего разрешения. Этот тэг в реализации HTML5 позволяет сделать очень удобно. 0

Тэг picture

Решение