Why are sprite images sticking out of the edges and how to fix it?

Question

css

Hello! There is a bootstrap grid with 3 columns, the elements of which are sprite images. The problem is that at certain resolutions, pictures (of different sizes) run into each other - demonstration in fidl . If the logo class is assigned the width:100%; style, then this will not solve the problem either, because they will slaughter - what do you advise?

.logo {
    background-image: url(http://www.mugeno.com/_ld/28/60107527.jpg);
    background-repeat: no-repeat;
    height: 90px;
    display: inline-block;
}
.logo-1 {
    background-position: 0 0;
    width: 200px;
}
.logo-2 {
    background-position: -5px -179px;
    width: 208px;
}
.logo-3 {
    background-position: 0 0;
    width: 300px;
}

<div class="container">

    <div class="col-sm-4">
      <a class="logo logo-1" href="http://nawinia.com/" target="_blank" rel="nofollow"></a>
      <a class="logo logo-2" href="http://pharmtechnology.info/" target="_blank" rel="nofollow"></a>
      <a class="logo logo-3" href="#" target="_blank" rel="nofollow"></a>
    </div>
    <div class="col-sm-4">
      <a class="logo logo-1" href="http://nawinia.com/" target="_blank" rel="nofollow"></a>
      <a class="logo logo-2" href="http://pharmtechnology.info/" target="_blank" rel="nofollow"></a>
      <a class="logo logo-3" href="#" target="_blank" rel="nofollow"></a>
    </div>
    <div class="col-sm-4">
      <a class="logo logo-1" href="http://nawinia.com/" target="_blank" rel="nofollow"></a>
      <a class="logo logo-2" href="http://pharmtechnology.info/" target="_blank" rel="nofollow"></a>
      <a class="logo logo-3" href="#" target="_blank" rel="nofollow"></a>
    </div>
    </div>

Answer 1

The fact is that the images from the sprite are fixed. They are not adaptable. If you have a 200px wide column and the block inside it is 250px wide without the parent block's overflow:hidden property, then naturally the child block will overflow the parent block. Set the specified property to the parent block, but then, as you write, "they will be slaughtered." Naturally, they will "slaughter" - this is a sprite image. So that they don't get cut off, don't use them as a background image, but embed them in the page.
I advise you to calculate the width of the block and, depending on the width, change the cropping of the sprite or use other images in the sprite for blocks that decrease in width. I don't claim to be true...