- Поисковые системы
- Практика оптимизации
- Трафик для сайтов
- Монетизация сайтов
- Сайтостроение
- Социальный Маркетинг
- Общение профессионалов
- Биржа и продажа
- Финансовые объявления
- Работа на постоянной основе
- Сайты - покупка, продажа
- Соцсети: страницы, группы, приложения
- Сайты без доменов
- Трафик, тизерная и баннерная реклама
- Продажа, оценка, регистрация доменов
- Ссылки - обмен, покупка, продажа
- Программы и скрипты
- Размещение статей
- Инфопродукты
- Прочие цифровые товары
- Работа и услуги для вебмастера
- Оптимизация, продвижение и аудит
- Ведение рекламных кампаний
- Услуги в области SMM
- Программирование
- Администрирование серверов и сайтов
- Прокси, ВПН, анонимайзеры, IP
- Платное обучение, вебинары
- Регистрация в каталогах
- Копирайтинг, переводы
- Дизайн
- Usability: консультации и аудит
- Изготовление сайтов
- Наполнение сайтов
- Прочие услуги
- Не про работу
Как снизить ДРР до 4,38% и повысить продажи с помощью VK Рекламы
Для интернет-магазина инженерных систем
Мария Лосева
Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий
Вопрос в следующем: как сделать картинки адаптивными под экран?
Вот такой код: <img border="0" src="http://мой домен/dubna.JPG" alt="о картинке" title="сама картинка" width="325" height="400" align="left"/>
width="325" - ширина, height="400" - высота, align="left" - обтекание текстом.
Как изменить код картинки, чтобы она вместе с экраном адаптировалась, а не оставалась тех же размеров(иначе в смартфоне выглядит коряво) и при этом сохранить саму пропорцию картинки?
Как то так делал
Гуглите "media queries".
garik21, пропишите в css
img {max-width:100%;
vertical-align: middle;
height: auto;
}
width:auto;
height: auto;
width:auto;
height: auto;
Спасибо. Вот это действительно понятно.
Спасибо. Вот это действительно понятно.
Рад помощь.
У меня в подписи тема, там где-то на 2 странице готовый шаблон для начала адаптации сайта. картинки тоже есть.
А вообще, стараюсь все картинки прописывать так, например:
Ну это в идеале :) Тестировал на IE 8 - понимает. А вот width:auto; height: auto; - не уверен что во всех браузерах уменьшится.
Еще можно так: width: 100%; height: auto; max-width: 100%;
У меня в подписи тема, там где-то на 2 странице готовый шаблон для начала адаптации сайта. картинки тоже есть.
А вообще, стараюсь все картинки прописывать так, например:
Ну это в идеале :) Тестировал на IE 8 - понимает. А вот width:auto; height: auto; - не уверен что во всех браузерах уменьшится.
Еще можно так: width: 100%; height: auto; max-width: 100%;
Второй момент вопроса связан с изменением картинки и самого сайта если на сайт попали с компьютера, экран которого с малым разрешением. Получается, выглядит сайт совсем иначе. Сейчас гоняю в гугл аналитик несколько экспериментов, результат - текстовое содержимое не меняется, изменяю "расположение" текста и обтекание. В итоге число отказов снизилось, переход по указанной ссылке вырос в среднем на 4,5 % (был меньше 1). Отсюда и интерес к данной составляющей дизайна. Не только адаптация под мобильные устройства.
"width:auto; height: auto;" - обкатал, в хроме работает. По остальным пока не пробовал.
Ваш вариант интересный, работать с самими картинками возможно придется меньше (подгоняя под размер большое разрешение, предположим если оригинал не 325*400, а 800*945).