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

XPraptor · 09.03.2021, 14:11

Онегин, чей то я не догнал в чем ваша проблема?

Код:

<!DOCTYPE html>
<html lang="ru">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>T</title>
<style type="text/css">
figure {display:block; clear:both; text-align:center; vertical-align:middle;}
figure img {display:inline-block; max-width:100%; height:auto;}
</style>
</head>
<body>
<figure><img src="11.png" alt="img"></figure>
</body>
</html>

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

Цитата:

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

в чем ваша проблема?

Уже ни в чём)
Ваш вариант по вертикали не работает.

Geers · 09.03.2021, 14:17

Это все можно сделать двумя строчками в css:

PHP код:


			
.img {

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

background-size: cover;  

}

Ну или:

PHP код:


			
.img {

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

    width: 100%;

    height: auto;

}

ziliboba0213 · 09.03.2021, 14:17

Цитата:

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

Онегин, чей то я не догнал в чем ваша проблема?

Код:

<!DOCTYPE html>
<html lang="ru">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>T</title>
<style type="text/css">
figure {display:block; clear:both; text-align:center; vertical-align:middle;}
figure img {display:inline-block; max-width:100%; height:auto;}
</style>
</head>
<body>
<figure><img src="11.png" alt="img"></figure>
</body>
</html>

Твой чет вертикально не выравнивает по высоте окна

ziliboba0213 · 09.03.2021, 14:19

Цитата:

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

Это все можно сделать двумя строчками в css:

PHP код:


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

Ну или:

PHP код:


			
.img {
    background: url(images/img.png) 100% 100% no-repeat; 
    width: 100%;
    height: auto;
}

Это вообще к чему?

Весь код приведи че к чему, чтобы по центру экрана было. А то непонятно

Geers · 09.03.2021, 14:21

Цитата:

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

Это вообще к чему?

Весь код приведи че к чему, чтобы по центру экрана было. А то непонятно

Как центрировать в сети полно инфы.

ziliboba0213 · 09.03.2021, 14:22

Цитата:

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

Как центрировать в сети полно инфы.

Твои то примеры к чему?

Они на весь экран растянут же... Или я чего путаю?

Geers · 09.03.2021, 14:23

Цитата:

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

Твои то примеры к чему?

Так речь про CSS.

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

Цитата:

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

Как центрировать в сети полно инфы.

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

ziliboba0213 · 09.03.2021, 14:25

Цитата:

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

Так речь про CSS.

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

09.03.2021, 14:11	#11
XPraptor Думаю, что надо худеть Академик Регистрация: 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"> figure {display:block; clear:both; text-align:center; vertical-align:middle;} figure img {display:inline-block; max-width:100%; height:auto;} </style> </head> <body> <figure><img src="11.png" alt="img"></figure> </body> </html> ✀ Состояние бота google и полезные ресурсы: всё про гугл

09.03.2021, 14:17	#13
Geers ≡ Internet☭ ≡ Профессор Регистрация: 26.06.2020 Адрес: ≡ Internet☭ ≡ Сообщений: 876 Сказал(а) спасибо: 338 Получил(а) "Спасибо": 1,673 Нарушения: 0/0 (0) Репутация: 418397	Re: css - адаптивная картинка по центру - как? Это все можно сделать двумя строчками в css: PHP код: `.img { background: url(images/img.png) 100% 100% no-repeat; background-size: cover; }` Ну или: PHP код: `.img { background: url(images/img.png) 100% 100% no-repeat; width: 100%; height: auto; }`

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