Geek Answers Handbook

Fluid distribution and css sprites

I used a css sprite to display backgrounds on a fixed-width design. Im changes to a fluid layout, but due to the background positions the background image becomes uncomfortable when resizing the browser.

Is it possible to use a css sprite with a fluid mesh background, where it resizes using a layout?

I need a layout compatible with 7 and 8 with other latest browsers.

+5
source share
5 answers

By adding to what @brianMaltzan wrote about @media, you can use different permission groups to have a different stylesheet

<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' />

or css code block to style your page:

@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;
    }
}

, , ( ). , ?

+2

@media . , 7 8.

0

, . - CSS. , , . .

0

JS, , . jquery, js.

I scale the sprit with a calculation factor between the width of the sprit and its parent width. I set a negative margin on it, because the scale of the div using the css transform property changes the aspect, but does not calculate the size.

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>
Run code
0
source

More articles:


All Articles