Как сохранить пропорции фоновых изображений слайд-шоу при использовании Supersized с Zurb Foundation

Я использую два популярных инструмента: Zurb Foundation и плагин Supersized jquery для сайта. Я использовал их вместе один раз. Однако, когда я использую их вместе, Zurb Foundation CSS сжимает соотношение сторон изображения, что искажает изображения в плагине Supersized jquery. Это происходит, когда окно браузера сужается.

Это было нормально на моем предыдущем сайте. Это не будет делать на моем текущем сайте.

Итак, что происходит, изображения сжимаются, когда окно или устройство узкое.

Если я удаляю Zurb CSS, то Supersized сохраняет пропорции без изменений, поэтому я знаю, что причина как-то связана с изменением размера изображения, которое делает Zurb Foundation. Итак, как мне обойти Zurb CSS только для фоновых изображений в Supersized.

Демонстрацию сайта можно увидеть здесь: http://mwildmandesign.com/IBG/index.html

вот сайт, размеры которого немного изменены, а соотношение сторон сохранено таким, каким мне нужно, чтобы он выглядел на моем сайте: http://risd.edu


jquery responsive-design fullscreen zurb-foundation supersized
person Muhatman Wildman    schedule 13.03.2013    source источник

Ответы (2)


arrow_upward
5
arrow_downward

Причиной этого является свойство max-width, устанавливаемое Foundation для всех изображений. Чтобы исправить это, вам просто нужно удалить свойство max-width для изображений, добавив его в свою таблицу стилей.

#supersized img{
  max-width: none;
}
person BiscuitKnees    schedule 27.05.2013
comment
Идеально, это решило проблему, с которой я столкнулся при использовании Foundation и supersizedjs. - person matthew; 06.09.2013
comment
Я только что потратил впустую около 2 часов, потому что настройка Bootstrap img {max-width: 100%;} по умолчанию сжимала мои увеличенные фоновые изображения по горизонтали, когда я не хотел, чтобы они сжимались. Большое спасибо, что помогли мне разобраться с этим! - person Neil Robertson; 04.08.2015

arrow_upward
0
arrow_downward

Соотношение сторон отображается одинаково во всех браузерах (IE8+, FF, Safari, Chrome) при изменении размера. Какой браузер вы используете для просмотра?


Альтернатива CSS

Простое решение для полноразмерного фонового изображения с сохранением соотношения сторон на самом деле может быть достигнуто с помощью CSS3 (с изящным понижением версии для старых браузеров). Он изменит размер изображения, сохраняя изображение видимым.

body {
  background: url(img.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
     -moz-background-size: cover;
       -o-background-size: cover;
          background-size: cover;
}

Работает в:

  1. Сафари 3+
  2. Хром
  3. Opera 10+ (Opera 9.5 поддерживает размер фона, но не ключевые слова)
  4. Firefox 3.6+ (Firefox 4 поддерживает версию с префиксом другого производителя)

вот демонстрация css-tricks

person Dylan    schedule 10.04.2013