css - адаптивная картинка по центру - как? - Форум об интернет-маркетинге

Онегин · 09.03.2021, 12:46

Как сделать картинку по центру, по горизонтали и по вертикали, а ещё и адаптивной?
Не могу нигде найти решение, а сам не бум бум в css
По факту нужна просто html страница, где будет выведена одна картинка.

ziliboba0213 · 09.03.2021, 12:54

Адаптивной? Если резиновой, то я только через js представляю, хотя может в новом css есть чего подобное...

Онегин · 09.03.2021, 12:56

Цитата:

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

Адаптивной?

Что бы и на десктопе и на мобиле помещалась целиком..

ziliboba0213 · 09.03.2021, 12:57

Цитата:

Сообщение от Онегин

Что бы и на десктопе и на мобиле помещалась целиком..

Ща подумаю, погодите

А фоном можно?

Онегин · 09.03.2021, 13:08

Цитата:

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

А фоном можно?

Картинка маловата 1125х675

ziliboba0213 · 09.03.2021, 13:15

Цитата:

Сообщение от Онегин

Картинка маловата 1125х675

Через табличку вроде работает

PHP код:


			
<!DOCTYPE html>

<html>

<head>

    <meta charset='UTF-8' />

    <title></title>

<style>

    html,  

    body {  

        height: 100%;  

    }

</style>

</head>

<body>

<table style='width: 100%; height: 100%'>

  <tr>

    <td style='vertical-align: middle; text-align: center'><img src='1.jpg' style='width: 100%; max-width: 1125px'/></td>

  </tr>

</table>

</body>

</html>

Через дивы так вроде:

PHP код:


			
<!DOCTYPE html>

<html>

<head>

    <meta charset='UTF-8' />

    <title></title>

<style>

    html,  

    body {  

        height: 100%;  

    }

</style>

</head>

<body>

<div style='width: 100%; height: 100%; display: table'>

    <div style='display: table-cell; vertical-align: middle; text-align: center'><img src='1.jpg' style='width: 100%; max-width: 1125px'/></div>

</div>

</body>

</html>

Онегин · 09.03.2021, 13:19

Цитата:

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

Через табличку вроде работает

Моё почтение

ziliboba0213 · 09.03.2021, 13:20

Цитата:

Сообщение от Онегин

Моё почтение

Там через див лучше, табличку просто вспомнил для начала, второй код лучше

Rema · 09.03.2021, 13:54

Сорри, вертикаль не заметила.

ziliboba0213 · 09.03.2021, 13:56

Цитата:

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

А теги center?
Или с адаптивностью не работает?

А зачем? Это же что-то очень старое, времен таблиц как раз

09.03.2021, 12:46	#1
Онегин ZZZZZ Доцент Регистрация: 08.07.2020 Сообщений: 162 Сказал(а) спасибо: 664 Получил(а) "Спасибо": 122 Нарушения: 0/0 (0) Репутация: 170867	css - адаптивная картинка по центру - как? Как сделать картинку по центру, по горизонтали и по вертикали, а ещё и адаптивной? Не могу нигде найти решение, а сам не бум бум в css По факту нужна просто html страница, где будет выведена одна картинка. ✀ хзчто

09.03.2021, 12:54	#2
ziliboba0213 Позитив =) Академик Регистрация: 21.06.2020 Адрес: Санкт-Петербург Сообщений: 4,412 Сказал(а) спасибо: 25,091 Получил(а) "Спасибо": 13,926 Нарушения: 0/0 (0) Репутация: 1412767	Re: css - адаптивная картинка по центру - как? Адаптивной? Если резиновой, то я только через js представляю, хотя может в новом css есть чего подобное...

09.03.2021, 13:54	#9
Rema Senior Member Профессор Регистрация: 25.06.2020 Адрес: Спб Сообщений: 514 Сказал(а) спасибо: 1,296 Получил(а) "Спасибо": 502 Нарушения: 0/0 (0) Репутация: 144105	Re: css - адаптивная картинка по центру - как? Сорри, вертикаль не заметила. ✀ За что себя люблю - за красоту и скромность.

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
Картинка в base64 в CSS	vga1	Веб-строительство	18	15.07.2020 21:38
Вёрстка адаптивная. нужна помощь	Alex Klo	Веб-строительство	32	04.07.2020 20:24
Адаптивная вёрстка	medexpert	Веб-строительство	9	28.06.2020 16:54

Опции темы
Версия для печати Отправить по электронной почте