Я использую серию элементов div для отображения набора клиентских логотипов. Причина использования фоновых изображений состояла в том, чтобы позволить центрировать изображения по центру по вертикали и горизонтали внутри div, вместо более хакерского решения с использованием элементов img.

Проблема: Я использую плавную, адаптивную сетку, поэтому, когда размер браузера ниже максимальной ширины (1000 пикселей), элементы div начинают уменьшаться. Это приводит к тому, что некоторые клиентские логотипы (фоновые изображения) обрезаются по краям. Это дано. Я хотел бы, чтобы эти изображения начали уменьшаться при попадании на края родительского элемента.

background-size: содержитчастично решает это. Единственным недостатком является то, что он также масштабирует фоновое изображение.размер выше 100%, что является проблемой. Это растягивает логотип, который не является хорошим решением для меня.

Я также мог бы просто не использовать background-size, и у логотипов клиента была установлена максимальная ширина. Это, однако, заставляет список клиентов переходить к дополнительным строкам для адаптивных макетов. Я бы хотел этого избежать, но для меня это единственное рабочее решение.

При этом, есть ли способ использовать размер фона, не увеличивая его? Или есть другой способ приблизиться к этому, который бы держал изображения по центру в пределах их рамки?

Вот's быстрый взгляд на код:

HTML

CSS

.clientlist .client { width: 20%; height: 90px; float: left; } /* Five clients a row */
.clientlist .client div { 
    width: 100%; 
    height: 100%; 
    background-position: center center; 
    background-repeat: no-repeat; } /* Vertically centers background images */
.clientlist .client .bcs { background-image: url(../images/client-bcs.jpg); } /* bunch more like this to define image */