09.03.2021, 14:25 | #21 |
≡ Internet☭ ≡
Профессор
Регистрация: 26.06.2020
Адрес: ≡ Internet☭ ≡
Сообщений: 876
Сказал(а) спасибо: 338
Получил(а) "Спасибо": 1,673
Нарушения: 0/0 (0)
Репутация: 338579
|
Re: css - адаптивная картинка по центру - как?
|
Сказали спасибо: |
09.03.2021, 14:25 | #22 |
ZZZZZ
Доцент
Регистрация: 08.07.2020
Сообщений: 162
Сказал(а) спасибо: 664
Получил(а) "Спасибо": 122
Нарушения: 0/0 (0)
Репутация: 170867
|
Re: css - адаптивная картинка по центру - как?
|
09.03.2021, 14:26 | #23 |
≡ Internet☭ ≡
Профессор
Регистрация: 26.06.2020
Адрес: ≡ Internet☭ ≡
Сообщений: 876
Сказал(а) спасибо: 338
Получил(а) "Спасибо": 1,673
Нарушения: 0/0 (0)
Репутация: 338579
|
Re: css - адаптивная картинка по центру - как?
|
09.03.2021, 14:31 | #24 |
Позитив =)
Академик
Регистрация: 21.06.2020
Адрес: Санкт-Петербург
Сообщений: 4,368
Сказал(а) спасибо: 24,690
Получил(а) "Спасибо": 13,506
Нарушения: 0/0 (0)
Репутация: 1158348
|
Re: css - адаптивная картинка по центру - как?
|
09.03.2021, 15:44 | #25 |
Думаю, что надо худеть
Академик
Регистрация: 22.06.2020
Сообщений: 1,791
Сказал(а) спасибо: 1,526
Получил(а) "Спасибо": 1,939
Нарушения: 0/0 (0)
Репутация: 632655
|
Re: css - адаптивная картинка по центру - как?
Сорри, не заметил (редко когда такое надо)
Во так, чтобы и по вертикали тоже: Код:
<!DOCTYPE html> <html lang="ru"> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>T</title> <style type="text/css"> * {padding:0; margin:0; box-sizing:border-box;} html, body {display:block; height:100%; width:100%;} figure {display:block; clear:both; height:100%; overflow: hidden; position: relative; text-align: center;} figure:before {content: '';height: 100%; display: inline-block !important; vertical-align: middle;} figure img {display: inline-block; vertical-align: middle; max-width:100%; height:auto;} </style> </head> <body> <figure><img src="11.png" alt="img"></figure> </body> </html> Хотите примерное выравнивание картинки на экране - просто для разных разрешений делайте отступы сверху для нее разные - это очень быстро и очень не нагружено. |
2 пользователя(ей) сказали cпасибо: |
09.03.2021, 15:49 | #26 |
ZZZZZ
Доцент
Регистрация: 08.07.2020
Сообщений: 162
Сказал(а) спасибо: 664
Получил(а) "Спасибо": 122
Нарушения: 0/0 (0)
Репутация: 170867
|
Re: css - адаптивная картинка по центру - как?
|
09.03.2021, 16:01 | #27 |
Senior Member
Профессор
Регистрация: 25.06.2020
Адрес: Спб
Сообщений: 514
Сказал(а) спасибо: 1,296
Получил(а) "Спасибо": 502
Нарушения: 0/0 (0)
Репутация: 144105
|
Re: css - адаптивная картинка по центру - как?
Кстати, сейчас часто встречается реклама на полный экран - блок центрирован как раз по вертикали и горизонтали.
|
09.03.2021, 18:44 | #28 | |
долботатус
Доцент
Регистрация: 21.06.2020
Адрес: дно Марианского разлома
Сообщений: 382
Сказал(а) спасибо: 2,807
Получил(а) "Спасибо": 623
Нарушения: 0/0 (0)
Репутация: 12436
|
Re: css - адаптивная картинка по центру - как?
Цитата:
|
|
09.03.2021, 20:43 | #29 |
Думаю, что надо худеть
Академик
Регистрация: 22.06.2020
Сообщений: 1,791
Сказал(а) спасибо: 1,526
Получил(а) "Спасибо": 1,939
Нарушения: 0/0 (0)
Репутация: 632655
|
Re: css - адаптивная картинка по центру - как?
|
Сказали спасибо: |
12.03.2021, 18:14 | #30 |
SEO-шник
Академик
Регистрация: 25.06.2020
Сообщений: 1,276
Сказал(а) спасибо: 534
Получил(а) "Спасибо": 345
Нарушения: 0/0 (0)
Репутация: 187214
|
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 |