Почему картинки спрайта выступают за края и как это исправить?

Question

[ligisayan]

Всем привет! Есть бутстраповская сетка с 3 колонками, элементами которых выступают спрайтовые изображения. Проблема в том, что при определенных разрешениях картинки (разного размера) наезжают друг на друга - демонстрация в фидл. Если классу logo назначить стиль width:100%;, то это тоже проблему не решит, т.к. они будут зарезаться - что посоветуете?

.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

[weranda]

Дело в том, что изображения из спрайта фиксированны. Адаптивностью они не отличаются. Если у вас колонка шириной 200px, а блок внутри нее имеет ширину 250px без свойства overflow:hidden родительского блока, то естественно дочерний блок будет выступать за пределы родительского. Задайте указанное свойство родительскому блоку, но тогда, как вы пишите "они будут зарезаться". Естественно они будут "зарезаться" – это же спрайтовое изображение. Чтобы они не зарезались не используйте их как фоновое изображение, а встраивайте их в страницу.
Посоветую высчитывать ширину блока и в зависимости от ширины менять обрезку спрайта или для уменьшающихся по ширине блоков использовать другие картинки в спрайте. Не претендую на истинность...

Comments

[ligisayan]

weranda для меня просто было новостью, что они не умеют background-size:cover; и background-size:contain; например

[Михаил Дудар]

ligisayan: background-size:cover; и background-size:contain; это динамичные свойства, они рассчитывают ширину и высоту экрана, соответственно и background-position: 0 0; тогда бы должен просчитывать координаты, а это очень была б затратная операция ).

[ligisayan]

Михаил аа, понял - спасибо!