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

Geers · 09.03.2021, 14:25

Цитата:

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

Я тоже искал, находил либо центрировать, либо адаптировать, а что бы и то и другое, да ещё для нуба, типа меня, не находил..

Если к вечеру не получится решить, то помогу, сейчас уезжаю на несколько часиков.

Онегин · 09.03.2021, 14:25

Цитата:

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

Если к вечеру не получится решить, то помогу, сейчас уезжаю на несколько часиков.

Так уже нашли вроде)

Geers · 09.03.2021, 14:26

Цитата:

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

А я какие примеры привел? JS?

Зачем css вписывать в html?
Некоторые браузеры мобилок его криво читают.

ziliboba0213 · 09.03.2021, 14:31

Цитата:

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

Зачем css вписывать в html?
Некоторые браузеры мобилок его криво читают.

Некоторые, это какие?

XPraptor · 09.03.2021, 15:44

Цитата:

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

Ваш вариант по вертикали не работает.

Сорри, не заметил (редко когда такое надо)

Во так, чтобы и по вертикали тоже:

Код:

<!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>

Но учитывайте момент, что пытаясь выровнять блок по вертикали, вы нагружает рендер в браузере, это не рекомендовано делать никогда.
Хотите примерное выравнивание картинки на экране - просто для разных разрешений делайте отступы сверху для нее разные - это очень быстро и очень не нагружено.

Онегин · 09.03.2021, 15:49

Цитата:

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

Во так, чтобы и по вертикали тоже:

Тоже рабочий вариант..

Rema · 09.03.2021, 16:01

Кстати, сейчас часто встречается реклама на полный экран - блок центрирован как раз по вертикали и горизонтали.

sony · 09.03.2021, 18:44

Цитата:

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

* {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;}

Пипец жесть... в Фотожабе это делается одним движением мыша...

XPraptor · 09.03.2021, 20:43

Цитата:

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

Пипец жесть... в Фотожабе это делается одним движением мыша...

В зачет, аж до слез

Had · 12.03.2021, 18:14

Цитата:

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

.img {
background: url(images/img.png) 100% 100% no-repeat;
background-size: cover;
}

А можно тут спрошу, чтобы тем не плодить? Вот эта хрень в ЦСС:

Цитата:

{

Как называется?

09.03.2021, 16:01	#27
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