Максимальный размер фонового изображения CSS

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

background-size: 70px auto;

и это будет работать для всех значков ландшафта. Но он растянет портретные изображения и сделает их выше, поэтому они будут иметь правильное соотношение сторон, но верх и низ будут обрезаны.

есть ли какой-то размер фона-max?

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

Ответ 1

Это проблема, которую CSS не может решить самостоятельно. Есть библиотеки JavaScript, которые будут выполнять эту работу. Если вы используете jQuery, вы можете найти плагин или свернуть свою собственную функцию.

Возьмите width и height изображения и вычислить отношение (x/y). Если отношение больше 70/50 (1.4), установите ширину до 70 пикселей и высоту (70 * x/y). Если отношение меньше 70/50 (1.4), установите высоту 50 пикселей и ширину (50 * x/y).

Также см. выравнивание по вертикали CSS

Если вы используете браузеры, которые не поддерживают вертикальное выравнивание, вы можете поместить изображение абсолютно на 50% и установить верхнее поле (ширина * -0,5) с помощью JavaScript. Это позволит выровнять середину изображения с серединой родительского элемента, что совпадает с вертикальным выравниванием по центру.

Ответ 2

Это не так сложно делать с CSS

1, пожалуйста, взгляните на спецификации Mozilla для смешанных устройств для background-size.
2, рассмотрите просто установку background-size: contain; (IE9 +, Safari 4.1+, FF 3.0+, Opera 10+) и min/max-width/height для элемента контейнера.

Ответ 3

Вы можете абсолютно решить эту проблему без JavaScript, используя комбинацию CSS3 background-size и медиа-запросов. например:.

@media only screen and (max-width: 1000px) {
    #element {
        background-size: contain;
    }
}

Обратите внимание, что ни один из них не поддерживается в IE8 или ниже, поэтому вы должны включить резервные копии для старого IE, если вы все еще поддерживаете его.

Ответ 4

Ответ на этот вопрос немного устарел. Как упоминается stringman5, ни один из параметров CSS не поддерживается в IE8 или ниже. Это также не лучший выбор для обработки jQuery фоновых изображений, если это не обязательно. Чтобы использовать опцию, которая включает резервные копии для более старого браузера, без использования JavaScript, вы можете сделать что-то в этом направлении:

#myElement {
    background: #FFFFFF url('mybackground.jpg') no-repeat right top;
}

@media only screen and (max-width: 1024px){
    #myElement {
        background-size: 50%;
    }
}

Обратите внимание, что я использую max-width в моем медиа-запросе, это означает, что background-size: 50%; будет применяться UNTIL 1024px. Помимо этого, он делает это по умолчанию. В старых браузерах, которые не поддерживают мультимедийные запросы или фоновый размер, они будут игнорировать параметры и отображать максимальный размер фонового изображения (размер по умолчанию).