Резиновая картинка

Автор Тема: Резиновая картинка  (Прочитано 4016 раз)

Оффлайн LocoRocoАвтор темы

  • Бизнес оценка: (0)
  • Постоялец
  • ***
  • СПАСИБО: 44
  • Сообщений: 190
  • Карма: 4
  • Пол: Мужской
    • РусБиатлон.рф

Оффлайн LocoRocoАвтор темы

  • Постоялец
  • ***
Резиновая картинка
« : 17-05-2011, 12:07:38 »
Возникла проблемка.

Можно ли сделать так, чтобы картинка тянулась в зависимости от размера экрана посетителей?!
Очень надо для резинового дизайна, а как реализовать не знаю.
Смотри биатлон на русбиатлон.рф!


Оффлайн Avadon

  • Бизнес оценка: (0)
  • Ветеран
  • *****
  • СПАСИБО: 455
  • Сообщений: 1320
  • Карма: 40
  • Пол: Мужской
  • Награды Мастер вывода в Яндекс ТОП 1 За благотворительность Самая быстрая регистрация (индексация) сайта в Яндекс

Оффлайн Avadon

  • Ветеран
  • *****
Re: Резиновая картинка
« Ответ #1 : 17-05-2011, 12:51:27 »
с помощью таблицы
Код:
Только зарегистрированные пользователи могут видеть код. Пожалуйста, войдите или зарегистрируйтесь.

Оффлайн LocoRocoАвтор темы

  • Бизнес оценка: (0)
  • Постоялец
  • ***
  • СПАСИБО: 44
  • Сообщений: 190
  • Карма: 4
  • Пол: Мужской
    • РусБиатлон.рф

Оффлайн LocoRocoАвтор темы

  • Постоялец
  • ***
Re: Резиновая картинка
« Ответ #2 : 17-05-2011, 12:53:47 »
с помощью таблицы
Код:
Только зарегистрированные пользователи могут видеть код. Пожалуйста, войдите или зарегистрируйтесь.
тоесть картинка не будет обрезаться? просто пропорционально изменяться?
Смотри биатлон на русбиатлон.рф!

Оффлайн ReCopier

  • Бизнес оценка: (2, 100%)
  • Ветеран
  • *****
  • СПАСИБО: 232
  • Сообщений: 812
  • Карма: 47
  • Пол: Мужской
  • Копирайтер, веб-разработчик
  • Награды За благотворительность Профессиональный копирайтер
    • Проект «Надежда» - поиск доноров крови по всей России

Оффлайн ReCopier

  • Ветеран
  • *****
  • Доп. информация
    • Бизнес оценка: (2, 100%)
    • СПАСИБО: 232
    • Сообщений: 812
    • Карма: 47
    • Пол: Мужской
    • Копирайтер, веб-разработчик
    • Награды За благотворительность Профессиональный копирайтер
      • Проект «Надежда» - поиск доноров крови по всей России
Re: Резиновая картинка
« Ответ #3 : 17-05-2011, 13:05:51 »
Попробуйте как-то так.
Код:
Только зарегистрированные пользователи могут видеть код. Пожалуйста, войдите или зарегистрируйтесь.

Оффлайн Avadon

  • Бизнес оценка: (0)
  • Ветеран
  • *****
  • СПАСИБО: 455
  • Сообщений: 1320
  • Карма: 40
  • Пол: Мужской
  • Награды Мастер вывода в Яндекс ТОП 1 За благотворительность Самая быстрая регистрация (индексация) сайта в Яндекс

Оффлайн Avadon

  • Ветеран
  • *****
Re: Резиновая картинка
« Ответ #4 : 17-05-2011, 13:30:44 »
в случае ReCopier, картинка будет изменять размер
в моём обрезать лишнее


Оффлайн madman

  • Бизнес оценка: (0)
  • Дебютант
  • *
  • СПАСИБО: 0
  • Сообщений: 1
  • Карма: 0

Оффлайн madman

  • Дебютант
  • *
Re: Резиновая картинка
« Ответ #5 : 09-08-2012, 19:34:25 »
а как сделать чтобы высота тоже менялась?.. то есть чтобы изображение оставалось пропорциональным..

Оффлайн Clever

  • Бизнес оценка: (7, 100%)
  • Ветеран
  • *****
  • СПАСИБО: 494
  • Сообщений: 965
  • Карма: 87
  • Пол: Мужской
  • Награды КМС поисковой оптимизации

Оффлайн Clever

  • Ветеран
  • *****
Re: Резиновая картинка
« Ответ #6 : 10-08-2012, 20:53:38 »
Я на эту тему уже писал ответ , не могу вспомнить где , поэтому повторюсь . Для подобных задач нужно использовать медиазапросы. В  CSS3  появилась такая функция.  Экран ведь имеет стандартное разрешение , поэтому вам нужно если сайт резиновый , сделать под разные разрешения разные медиазапросы .  Делается это так:
 @media screen and (max-width: 1024px) {
     .lalala  { width:1024px;  height:200px;}
 }
 @media screen and (max-width: 1280px) {
     .lalala { width:1280px;  height:240px;}
 }
Еще вариант , если вы хотите сделать не один и не два класса , а скажем чтобы на разных разрешениях очень много чего изменялось , то будет проще создать несколько файлов стилей для разных экранов , и подключить так :
<link media="screen" href="{THEME}/style/style.css" type="text/css" rel="stylesheet" />
<link rel="stylesheet" media="screen and (max-width: 1024px) , (max-width: 1088px) , (max-width: 1152px) , (max-width: 1280px)" href="{THEME}/style/style2.css" />
Путь естественно ваш , как и название файла , а данные команды дают браузеру понять что на разрешениях от 1024 до 1280 будут использоваться стили из файла style2.css , все что не попадет в этот диапазон , будет использовать стили style.css


 

Похожие темы

  Тема / Автор Ответов Последний ответ
9 Ответов
3621 Просмотров
Последний ответ 11-12-2011, 15:55:52
от STRIJ
4 Ответов
1552 Просмотров
Последний ответ 19-02-2013, 07:57:18
от bibika
2 Ответов
1464 Просмотров
Последний ответ 03-04-2013, 12:04:01
от pinakl
0 Ответов
562 Просмотров
Последний ответ 12-11-2017, 16:24:07
от Алина Шехова
4 Ответов
374 Просмотров
Последний ответ 22-05-2020, 17:17:43
от vold57