Изображение по размеру экрана в браузере
Страницы: 1
Изображение по размеру экрана в браузере
Здравствуйте!
Подскажите пожалуйста.
Если Вы кликните по картинке https://sites.google.com/site/sandracretulauer/ и картинка больше размера экрана, браузер уменьшит ее до размеров экрана, если нет - оставит в оригинальном размере. Мозилла и Опера - поставят по центру экрана. Как то же самое прописать в HTML? Доступа к движку нет
Цитата
Михаил пишет:
Как то же самое прописать в HTML?

Код
img
{
    min-width: 100%
    display:block;
    margin: 0 auto;
    border: 0px solid #fff;
}
Цитата
Валентин пишет:
Цитата
Михаил пишет:
Как то же самое прописать в HTML?

Код
 img
{
    min-width: 100%
    display:block;
    margin: 0 auto;
    border: 0px solid #fff;
} 
Объясните, как для полного чайника.Вот, что у меня прописано сейчас:



<div style="display:block;margin-right:auto;margin-left:auto;width:auto;height:auto;text-align:center"><br>
Рисунок

<br>
</div>


Картинка стоит по центру, но в оригинальном размере. Что нужно изменить, чтобы она подстраивалась под размер экрана?
<div style="display:block;margin-right:auto;margin-left:auto;width:auto;height:auto;text-align:center"><br>
Рисунок

<br>
</div>
Цитата
Валентин пишет:
Цитата
Михаил пишет:
Как то же самое прописать в HTML?

Код
 img
{
    min-width: 100%
    display:block;
    margin: 0 auto;
    border: 0px solid #fff;
} 
<div style="display:block;margin-right:auto;margin-left:auto;width:auto;height:auto;text-align:center"><br>
Рисунок

<br>
</div>
Цитата
Валентин пишет:
Цитата
Михаил пишет:
Как то же самое прописать в HTML?

Код
 img
{
    min-width: 100%
    display:block;
    margin: 0 auto;
    border: 0px solid #fff;
} 
Что такое: solid #fff?
Цитата
Михаил пишет:
Цитата
Валентин пишет:
Цитата
Михаил пишет:
Как то же самое прописать в HTML?

Код
  img
{
    min-width: 100%
    display:block;
    margin: 0 auto;
    border: 0px solid #fff;
}  
Объясните, как для полного чайника.Вот, что у меня прописано сейчас:



<div style="display:block;margin-right:auto;margin-left:auto;width:auto;height:auto;text-align:center"><br>


<br>
</div>


Картинка стоит по центру, но в оригинальном размере. Что нужно изменить, чтобы она подстраивалась под размер экрана?
картинка лежит в блоке, значит нужно задать этому блоку размеры (какой должен быть желаемый размер картинки) и отцентровать, а самой картинке задать минимальный размер в 100%, тогда она будет подстраиваться под размеры блока
и от "быров" можно избавиться

п.с.
[IMG]


Код
border: 0px solid #fff;
картинка по-умолчанию имеет рамку...эта строчка говорит, что у Вашей картинки будет сплошная рамка белого
цвета в 0 пикселей smile:)
можно заменить на border: none;
Цитата
Валентин пишет:
Цитата
Михаил пишет:
Цитата
Валентин пишет:
Цитата
Михаил пишет:
Как то же самое прописать в HTML?

Код
   img
{
    min-width: 100%
    display:block;
    margin: 0 auto;
    border: 0px solid #fff;
}   
Объясните, как для полного чайника.Вот, что у меня прописано сейчас:



<div style="display:block;margin-right:auto;margin-left:auto;width:auto;height:auto;text-align:center"><br>


<br>
</div>


Картинка стоит по центру, но в оригинальном размере. Что нужно изменить, чтобы она подстраивалась под размер экрана?
картинка лежит в блоке, значит нужно задать этому блоку размеры (какой должен быть желаемый размер картинки) и отцентровать, а самой картинке задать минимальный размер в 100%, тогда она будет подстраиваться под размеры блока
и от "быров" можно избавиться

п.с.
[IMG]
Код
 border: 0px solid #fff; 
картинка по-умолчанию имеет рамку...эта строчка говорит, что у Вашей картинки будет сплошная рамка белого
цвета в 0 пикселей smile:)
можно заменить на border: none;
Все равно выводится в оригинальном размере

<div><br>
</div>
<div style="display:block;margin-right:auto;margin-left:auto;min-width:100%;min-height:100%;text-align:center"> Рисунок
</div>
</div>
Цитата
Валентин пишет:
Цитата
Михаил пишет:
Как то же самое прописать в HTML?

Код
 img
{
    min-width: 100%
    display:block;
    margin: 0 auto;
    border: 0px solid #fff;
} 
Вот, что получается:
https://sites.google.com/site/sandracretulauer/111
улыбнуло smile:)


Код
<div style="display:block;margin:0px auto;width:400px;height:300px;text-align:center">
   <img style="min-width:100%;display:block;border: 0px solid #fff;" title="kartinko" alt="kartinko" src="путь до картинки"/>
</div>
 

блоку задаете те размеры, какие Вы хотите видеть у картинки, если картинка имеет рамку, то добавьте к размерам ширину рамки дважды ...
Поставил: height=auto&width=98%25" border="0" height="auto" width="98%"></a></div>
<br>
</div> - это правильно? На всех мониках будет смотреться одинаково?

https://sites.google.com/site/sandracretulauer/4444 вот, что получается

А как избавиться от вертикальной прокрутки?  Если ставлю высоту в процентах, картинка сплющивается. 

width:400px;height:300px - а это зачем на резине? Ширина сайта в процентах. У кого-то моник 800, у кого-то 1900
Изменено: Михаил - 8 Сентября 2012 17:13
Неужели нет ответа, как избавиться от вертикальной прокрутки?
Цитата
Михаил пишет:
height
Вот это отвечает за вертикальность. Пробуйте значения ставить разные. Может так же как у длины "98%"
Качественный рерайт/копирайт/перевод | Создание сайтов за еду! Дёшево!
Цитата
Anabioz 999 пишет:
Цитата
Михаил пишет:
height
Вот это отвечает за вертикальность. Пробуйте значения ставить разные. Может так же как у длины "98%"
Простите, протупил. Тут уже нужно копаться в коде сайта, уменьшить верх и низ страниц.
Страницы: 1
Похожие темы:
Читают тему (гостей: 1, пользователей: 0, из них скрытых: 0)
Новые темыОбъявленияСвободное общение
09:39 01.02. Апдейт 31.01 // Chrome готовит "чёрную метку" для ИИ? 
09:36 РСЯ и тормоза сайта: Яндекс начал штрафовать за плохой PageSpeed? 
09:26 Трафик пробил дно? Худший январь за 10 лет и внезапный рост продаж с Bing 
08:53 Нашел скрины выплат с Сапы за 2010 год. Пошел плакать 
19:27 Плагин ответа 
19:20 SEO под нейро 
19:16 Дзен окончательно всё? Или у кого-то еще «стреляет» белый контент? 
09:47 Мониторинг обменников Сrypto-scout.io 
09:14 Просто $0.04/IP 9PROXY.COM Резидентные прокси Неограниченная пропускная способность Уникальная политика замены Без чёрного списка 
01:56 В топ1 за 3-5 дней НЕПФ 
00:47 Swapwatch.org — Мониторинг криптовалютных обменников 
18:39 SellBuycoin.io - надежный проводник в мир обмена криптовалют на фиат и наличные по РФ! 
17:25 SMS.PRO - площадка для продажи твоих номеров 
16:14 Все услуги в Телеграм 
10:31 Осталось 3-5 месяцев до блокировки YouTube в России, — заявил Клименко 
09:23 [AI] Бот за $600к советовал есть сыр с крысами. Нью-Йорк его (наконец-то) снес 
07:11 Список обновленных тем пуст... 
05:23 Точные прогнозы на футбол 
01:02 Ставки на супер тренды в спорте 
17:02 Gartner обещал смерть SEO к 2026 году. Открываем метрику и проверяем 
08:25 Отвратительное поведение