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 Сказал(а) спасибо: 656 Получил(а) "Спасибо": 122 Нарушения: 0/0 (0) Репутация: 170867	css - адаптивная картинка по центру - как? Как сделать картинку по центру, по горизонтали и по вертикали, а ещё и адаптивной? Не могу нигде найти решение, а сам не бум бум в css По факту нужна просто html страница, где будет выведена одна картинка. ✀ хзчто

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

09.03.2021, 13:54	#9
Rema Senior Member Профессор Регистрация: 25.06.2020 Адрес: Спб Сообщений: 508 Сказал(а) спасибо: 1,294 Получил(а) "Спасибо": 502 Нарушения: 0/0 (0) Репутация: 84889	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