html – Img-responsive (bootstrap) class cuts sprite

Question:

.img-responsive cuts the sprite:

<div class="container"> 
    <div class="row">
        <div class="col-sm-9 ">
            texttexttexttexttexttexttexttexttexttext
            texttexttexttexttexttexttexttexttexttexttex
            ttexttexttexttexttexttexttexttexttexttexttext
            texttexttexttexttexttexttexttexttexttexttexttex
            ttexttexttexttexttexttexttexttexttexttexttexttex
            ttexttexttexttexttexttext
        </div>
        <div class="col-sm-3">
            <div class="photo ">
                <div class="photo__item photo__item_4 img-responsive"></div>
            </div> 
        </div>
    </div>
</div>

.photo {
    display: inline-block;
    vertical-align: top;
    max-width: 160px;
    width: 100%;
    height: auto;
    margin: 0px 17px 20px 0;
}
.photo__item_4{
    background: #fff url("../images/img-sprite-sb432b0f395.png") 0px -2455px no-repeat;
    display: block;
    max-width: 100%;
    height: auto;
    height: 104px;
    position: relative;
}

Answer:

.img-responsive is better not to use .img-responsive here – this bootstrap class cannot be combined with css sprites. Because it directly affects the image, and here you need to influence its parent (you have it .photo ).

The layout will be like this:

<div class="photo photo_4">
  <div class="photo__item photo__item_4"></div>
</div>

Pay attention to photo_4 and photo_item_4 – these classes are needed to style a single sprite image.

For tests, I took this sprite , a working example is available here: https://jsfiddle.net/gambala/72Let9a4/

We adjust the .photo to fit the full width of the container:

.photo {
  width: 100%;
}

At the same .photo_4 we limit .photo_4 in width:

.photo_4 {
  max-width: 112px;
}

Where 112px is the width of the individual image in the sprite. Pay attention – the value is in pixels.

Next – the styles of the image itself:

.photo__item {
  background-repeat: no-repeat;
  padding-bottom: 100%;
  width: 100%;
}

width: 100% stretches the image to its parent, that is, to .photo . But since .photo is a limit to 112px – the image will no longer be stretched at this point.

padding-bottom: 100%; is an important attribute. Our image has a height of zero, but has a bottom padding equal to the width of the .photo container. As a result, the actual height of our image will be equal to its width, including in the case of 112px . We get a rubber square. We will put a sprite in it as a background.

If your sprite image is not square, then your padding-bottom will be different. For example, if the image is 112px*83px then the padding-bottom will be 83px / 112px = 0.7410 = 74.10%

When we set the image as a background, we indicate all sizes in percentages :

.photo__item_4 {
  background: #fff url("https://cdn.tutsplus.com/webdesign/uploads/legacy/tuts/373_sprites/angry_birds.png");
  background-position: 0 38.88%;
  background-size: 535.71% 357.14%;
}

Calculation formulas:

  • Size by width – 600px / 112px = 5.3571 = 535.71%
  • Height size – 400px / 112px = 3.5714 = 357.14%
  • X 0px / ( 600px - 112px ) = 0
  • Indent on the 112px / ( 400px - 112px ) = 0.3888 = 38.88%112px / ( 400px - 112px ) = 0.3888 = 38.88%

Where:

  • 600px – sprite width
  • 400px – sprite height
  • 112px in size and also inside parentheses in indentation – the width and height of the image in the sprite
  • 0px and 112px outside the brackets in the indents – the indentation of the image in the sprite by x and y

Working example: https://jsfiddle.net/gambala/72Let9a4/

Scroll to Top