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

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

background-size: 70px auto;

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

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

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

источник

2010-10-29 Jonathan.

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

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

Также см CSS vertical-align

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

источник

2010-10-29 21:47:31 kijin

Ugh, почему CSS не может просто центрировать вертикальное выравнивание, как и горизонтальное центрирование. CSS может быть намного проще, разумно очевидным !!! –

@ Jonathan CSS может делать выравнивание по вертикали только отлично, только Microsoft прикручивает его, как обычно. Не обвиняйте CSS, вините M $ :) – kijin

Microsoft? что они с этим связаны? И если я выхожу из вертикального выравнивания: в центре на родительском объекте imgs, он не выравнивает вертикально –

Это не так сложно сделать это с помощью CSS

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

источник

2012-03-15 15:43:25 kaiser

'background-size: содержать' сделал трюк для моего использования. – joshuarh

"background-size: содержать;" не решает проблему, если для изображения требуется определенная высота. «min-height» для элемента контейнера не заставит изображение покрыть высоту. –

У меня есть «background-size: 100%» для моего варианта использования, а затем я просто указываю элементу, где я применил «background-image», чтобы иметь максимальный размер в моей самой большой «точке останова». Работает как шарм. –

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

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

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

источник

2013-10-14 13:24:01 richardwestenra

Ответ на этот вопрос немного устарел. Как упоминает 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. Помимо этого, он имеет размер по умолчанию.В старых браузерах, которые не поддерживают мультимедийные запросы или фоновый размер, они будут игнорировать параметры и отображать максимальный размер фонового изображения (размер по умолчанию).

источник

2014-06-05 15:35:12

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

ответ

Смежные вопросы