Форум об интернет-маркетинге
Вернуться   Форум об интернет-маркетинге > Технические вопросы > Веб-строительство

Ответ
 
Опции темы
Старый 09.03.2021, 14:11   #11
XPraptor
Думаю, что надо худеть
Академик
 
Аватар для XPraptor
 
Регистрация: 22.06.2020
Сообщений: 1,791
Сказал(а) спасибо: 1,526
Получил(а) "Спасибо": 1,939
Нарушения: 0/0 (0)
Репутация: 541251

По умолчанию 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 и полезные ресурсы: всё про гугл
XPraptor вне форума   Ответить с цитированием
Старый 09.03.2021, 14:15   #12
Онегин
ZZZZZ
Доцент
 
Аватар для Онегин
 
Регистрация: 08.07.2020
Сообщений: 160
Сказал(а) спасибо: 652
Получил(а) "Спасибо": 122
Нарушения: 0/0 (0)
Репутация: 106471

Thread Starter Re: css - адаптивная картинка по центру - как?

Цитата:
Сообщение от XPraptor Посмотреть сообщение
в чем ваша проблема?
Уже ни в чём)
Ваш вариант по вертикали не работает.
Онегин вне форума   Ответить с цитированием
Старый 09.03.2021, 14:17   #13
Geers
≡ Internet☭ ≡
Профессор
 
Аватар для Geers
 
Регистрация: 26.06.2020
Адрес: ≡ Internet☭ ≡
Сообщений: 876
Сказал(а) спасибо: 338
Получил(а) "Спасибо": 1,673
Нарушения: 0/0 (0)
Репутация: 271720

По умолчанию Re: css - адаптивная картинка по центру - как?

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

PHP код:
.img {
backgroundurl(images/img.png100100no-repeat
background-sizecover;  

Ну или:
PHP код:
.img {
    
backgroundurl(images/img.png100100no-repeat
    
width100%;
    
heightauto;

Geers вне форума   Ответить с цитированием
Старый 09.03.2021, 14:17   #14
ziliboba0213
Позитив =)
Академик
 
Аватар для ziliboba0213
 
Регистрация: 21.06.2020
Адрес: Санкт-Петербург
Сообщений: 4,360
Сказал(а) спасибо: 24,594
Получил(а) "Спасибо": 13,412
Нарушения: 0/0 (0)
Репутация: 957405

По умолчанию Re: css - адаптивная картинка по центру - как?

Цитата:
Сообщение от 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   #15
ziliboba0213
Позитив =)
Академик
 
Аватар для ziliboba0213
 
Регистрация: 21.06.2020
Адрес: Санкт-Петербург
Сообщений: 4,360
Сказал(а) спасибо: 24,594
Получил(а) "Спасибо": 13,412
Нарушения: 0/0 (0)
Репутация: 957405

По умолчанию Re: css - адаптивная картинка по центру - как?

Цитата:
Сообщение от Geers Посмотреть сообщение
Это все можно сделать двумя строчками в css:

PHP код:
.img {
backgroundurl(images/img.png100100no-repeat
background-sizecover;  

Ну или:
PHP код:
.img {
    
backgroundurl(images/img.png100100no-repeat
    
width100%;
    
heightauto;

Это вообще к чему? Весь код приведи че к чему, чтобы по центру экрана было. А то непонятно
ziliboba0213 вне форума   Ответить с цитированием
Старый 09.03.2021, 14:21   #16
Geers
≡ Internet☭ ≡
Профессор
 
Аватар для Geers
 
Регистрация: 26.06.2020
Адрес: ≡ Internet☭ ≡
Сообщений: 876
Сказал(а) спасибо: 338
Получил(а) "Спасибо": 1,673
Нарушения: 0/0 (0)
Репутация: 271720

По умолчанию Re: css - адаптивная картинка по центру - как?

Цитата:
Сообщение от ziliboba0213 Посмотреть сообщение
Это вообще к чему? Весь код приведи че к чему, чтобы по центру экрана было. А то непонятно
Как центрировать в сети полно инфы.
Geers вне форума   Ответить с цитированием
Старый 09.03.2021, 14:22   #17
ziliboba0213
Позитив =)
Академик
 
Аватар для ziliboba0213
 
Регистрация: 21.06.2020
Адрес: Санкт-Петербург
Сообщений: 4,360
Сказал(а) спасибо: 24,594
Получил(а) "Спасибо": 13,412
Нарушения: 0/0 (0)
Репутация: 957405

По умолчанию Re: css - адаптивная картинка по центру - как?

Цитата:
Сообщение от Geers Посмотреть сообщение
Как центрировать в сети полно инфы.
Твои то примеры к чему? Они на весь экран растянут же... Или я чего путаю?
ziliboba0213 вне форума   Ответить с цитированием
Старый 09.03.2021, 14:23   #18
Geers
≡ Internet☭ ≡
Профессор
 
Аватар для Geers
 
Регистрация: 26.06.2020
Адрес: ≡ Internet☭ ≡
Сообщений: 876
Сказал(а) спасибо: 338
Получил(а) "Спасибо": 1,673
Нарушения: 0/0 (0)
Репутация: 271720

По умолчанию Re: css - адаптивная картинка по центру - как?

Цитата:
Сообщение от ziliboba0213 Посмотреть сообщение
Твои то примеры к чему?
Так речь про CSS.
Geers вне форума   Ответить с цитированием
Старый 09.03.2021, 14:23   #19
Онегин
ZZZZZ
Доцент
 
Аватар для Онегин
 
Регистрация: 08.07.2020
Сообщений: 160
Сказал(а) спасибо: 652
Получил(а) "Спасибо": 122
Нарушения: 0/0 (0)
Репутация: 106471

Thread Starter Re: css - адаптивная картинка по центру - как?

Цитата:
Сообщение от Geers Посмотреть сообщение
Как центрировать в сети полно инфы.
Я тоже искал, находил либо центрировать, либо адаптировать, а что бы и то и другое, да ещё для нуба, типа меня, не находил..
Онегин вне форума   Ответить с цитированием
Старый 09.03.2021, 14:25   #20
ziliboba0213
Позитив =)
Академик
 
Аватар для ziliboba0213
 
Регистрация: 21.06.2020
Адрес: Санкт-Петербург
Сообщений: 4,360
Сказал(а) спасибо: 24,594
Получил(а) "Спасибо": 13,412
Нарушения: 0/0 (0)
Репутация: 957405

По умолчанию Re: css - адаптивная картинка по центру - как?

Цитата:
Сообщение от Geers Посмотреть сообщение
Так речь про CSS.
А я какие примеры привел? JS?
ziliboba0213 вне форума   Ответить с цитированием
Ответ

Опции темы

Ваши права в разделе
Вы не можете создавать новые темы
Вы не можете отвечать в темах
Вы не можете прикреплять вложения
Вы не можете редактировать свои сообщения

BB коды Вкл.
Смайлы Вкл.
[IMG] код Вкл.
HTML код Выкл.

Быстрый переход

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


Текущее время: 19:36. Часовой пояс GMT +3.


Powered by vBulletin® Version 3.8.11
Copyright ©2000 - 2024, vBulletin Solutions Inc. Перевод: zCarot