Расположение жидкости и спрайты CSS

Question

Я использовал спрайт css для отображения фона на дизайне с фиксированной шириной. Я перехожу на плавный макет, но из-за положения фона фоновое изображение становится ненадежным при изменении размера браузера.

Можно ли использовать CSS-спрайт с жидким фоном сетки, где он изменяет размеры вместе с макетом?

Мне нужен макет, совместимый с 7 и 8 с другими последними браузерами

Answer 1

Я не пробовал это, но есть люди, которые делают это с помощью CSS Clip.

http://bowdenweb.com/wp/2011/08/making-responsive-accessible-high-dpi-css-sprites.html

http://chiefalchemist.com/responsive-css-sprites-proof-of-concept-v0-1-0/

Answer 2

В дополнение к тому, что @brianMaltzan писал о @media, вы можете использовать разные группы разрешений, чтобы иметь другую таблицу стилей

<link rel='stylesheet' media='(max-width: 700px)' href='css/small.css' />
<link rel='stylesheet' media='(min-width: 701px) and (max-width: 1024px)' href='css/medium.css' />
<link rel='stylesheet' media='(min-width: 1025px)' href='css/large.css' />

или блок кода CSS для стиля вашей страницы:

@media (max-width: 860px) {
    body {
         width: 600px;
    }
}
@media (min-width: 861px) and (max-width: 1024px) {
    body {
         width: 800px;
    }
}
@media (min-width: 1025px) {
    body {
         width: 1000px;
    }
}

Я бы предложил использовать несколько фиксированных размеров, которые будут меняться с каждой таблицей стилей, а не в процентах (если вы их используете). Можете ли вы показать нам живой пример спрайта на месте с вашим изменяемым макетом, чтобы мы могли увидеть проблему?

Answer 3

Если вы согласны использовать JS, возможно, как этот фрагмент. Я использую jquery, но вы можете легко конвертировать его в чистый js.

Я масштабирую спрайт, вычисляя соотношение между шириной спрайта и его родительской шириной. Я установил некоторое отрицательное поле, потому что масштабирование div с помощью свойства css transform изменяет аспект, но не вычисляет размер.

var $sprits = $('.sprit');
$sprits.each(function() {
  
  $(this).data('originalWidth', $(this).width());
  $(this).data('originalHeight', $(this).height());
  $(this).data('originalParentHeight', $(this).parent().height());
})

function setSpritsScale() {
  
  $sprits.each(function() {
    
    ratio = $(this).parent().width() / $(this).data('originalWidth');
    marginWidth = $(this).data('originalWidth') - $(this).parent().width();
    marginHeight = $(this).data('originalHeight') - $(this).data('originalParentHeight') * ratio;
    $(this).css({
      'transform': 'scale(' + ratio + ')',
      'margin': (-marginHeight / 2) + 'px ' + (-marginWidth / 2) + "px"
    });

  })
}

$(window).resize(setSpritsScale);

setSpritsScale();

.columns {
  float: left;
  width: 20%;
}
.sprit {
  display: inline-block;
  background-image: url('http://changlee.com.br/cascavel/wp-content/uploads/2013/10/sprite2l-500x500.jpg');
  background-repeat: no-repeat;
  min-width: 75px;
  min-height: 75px;
  border: 1px solid black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="columns">
  <div class="sprit"></div>
</div>

<div class="columns">
  <div class="sprit"></div>
</div>
<div class="columns">
  <div class="sprit"></div>
</div>
<div class="columns">
  <div class="sprit"></div>
</div>
<div class="columns">
  <div class="sprit"></div>
</div>

Answer 4

Нет, это невозможно.Рекомендуемое решение состоит в том, чтобы использовать карту спрайтов во встроенном изображении и иметь высоту и ширину этого элемента в CSS. Вот ссылка , объясняющая, как это сделать.Это позволяет вашим изображениям изменять размер с макетом.

Answer 5

@ media может работать для вас.Не уверен насчет ie7 & 8.