Изображение по размеру экрана в браузере
Страницы: 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)
Новые темыОбъявленияСвободное общение
13:23 LOSPOLLOS.COM - Конвертим по рецепту Хайзенберга. Dating, Mainstream, Binary Options 
13:16 Dao.AD: Монетизация и покупка Push/Pops/Inpage и Video трафика! 
08:26 Помогите! ОТКРЫЛАСЬ монетизация на ЮТЮБ! Но Как быть в 2024 с Adsense? 
08:23 Rotapost прикрыли! Чем пользоваться? 
17:53 Webvork - международная товарная СРА сеть с сертифицированными офферами на Европу. 
12:39 2Index - быстрая индексация страниц сайта и обратных ссылок 
06:17 3snet - гемблинг, беттинг, форекс, бинарные опционы, майнинг 
17:34 CryptoGraph — Анонимный обмен криптовалют без KYC и AML 
17:06 TETChange-Обменник криптовалют 
14:45 TIGER SMS — Виртуальные номера для SMS-верификации (опт и розница) 
14:43 Onechange.me — надежный обменник криптовалют и фиатных средств 
14:03 Quix Email - сервис почтовых активаций 
13:54 PonyBit.ru - обменный пункт PonyBit.ru (Понибит.ру) 
13:34 Рассылки СМС/SMS, Вайбер/Viber, Ватсап/Whatsapp, Телеграм/Telegram любой тематики по всему миру 
13:08 Бесплатный майнинг Tether (USDT) 
10:29 С юмором по жизни! 
16:49 monetizer.agency – рекламная сеть для взрослого и развлекательного трафика. 100$ новому вебмастеру 
20:43 Добро пожаловать в цифровой мир... 
15:59 Про мясо 
23:09 ПП от PMS remote.team - 200$ за команду 
13:28 Компьютерная мышь