Если вам нужно увеличить изображение, вы должны отредактировать само изображение в редакторе изображений.
Если вы используете тег img, вы можете изменить размер, но это не даст желаемого результата, если вам нужно, чтобы изображение было фоном для какого-то другого контента (и оно не будет повторяться, как вы, кажется, хотите) ...
CSS3 раскрыть силы
Это можно сделать в CSS3 с background-size.
Все современные браузеры поддерживают это, поэтому, если вам не требуется поддержка старых браузеров, это способ сделать это. Поддерживаемые браузеры:
Mozilla Firefox 4.0+ (Gecko 2.0+), Microsoft Internet Explorer 9.0+, Opera 10.0+, Safari 4.1+ (webkit 532) и Chrome 3.0+.
.stretch{/* Will stretch to specified width/height */background-size:200px150px;}.stretch-content{/* Will stretch to width/height of element */background-size:100%100%;}.resize-width{/* width: 150px, height: auto to retain aspect ratio */background-size:150px Auto;}.resize-height{/* height: 150px, width: auto to retain aspect ratio */background-size: Auto 150px;}.resize-fill-and-clip{/* Resize to fill and retain aspect ratio.
Will cause clipping if aspect ratio of box is different from image. */background-size: cover;}.resize-best-fit{/* Resize to best fit and retain aspect ratio.
Will cause gap if aspect ratio of box is different from image. */background-size: contain;}
В частности, я , как coverи containценность , которые дают нам новую силу контроля , что у нас не было раньше.
Круглый
Вы также можете использовать background-size: roundэто значение в сочетании с repeat:
.resize-best-fit-in-repeat{/* Resize to best fit in a whole number of times in x-direction */background-size: round auto;/* Height: auto is to keep aspect ratio */background-repeat: repeat;}
Это позволит отрегулировать ширину изображения, чтобы оно соответствовало целому числу раз в области расположения фона.
Дополнительное примечание
Если вам нужен статический размер пикселя, все равно разумно физически изменить размер фактического изображения. Это необходимо как для повышения качества изменения размера (учитывая, что программное обеспечение для обработки изображений работает лучше, чем для браузеров), так и для экономии полосы пропускания, если исходное изображение больше, чем то, что отображается.
Обратите внимание, что существует также вопрос о дисплеях сетчатки на iPad и iPhone и, возможно, других устройствах с высоким разрешением. Это означает, что, возможно, стоит изменить размеры больших изображений, используя CSS, а также использовать несколько файлов CSS и другие приемы для обслуживания определенных изображений. Хорошее введение в это здесь: webmonkey.com/2012/03/…
Лев
На данный момент это худшее решение, так как не каждый интернет-магазин будет менять размер изображения в соответствии с предложением. В 2009 году он, скорее всего, был близок к лучшему варианту, теперь просто используйте атрибуты размера, как показано ниже.
ShaunOReilly
332
Это поддерживает только CSS 3,
background-size:200px50px;
Но я бы отредактировал само изображение, так что пользователю нужно меньше загружать, и оно могло бы выглядеть лучше, чем уменьшенное изображение без сглаживания.
размер фона: 100%; фон положение: центр; - это работает в IE6, работающем на моей виртуальной машине на XP Home.
InnateDev
7
IE 6,7,8 не является «большинством браузеров».
Mahmoodvcs
1
Даже в 2013 году - хотя комментарий «IE6,7,8 не является« большинством браузеров »» может быть отчасти правдив в отношении IE6; К сожалению, IE7 и IE8 по-прежнему имеют довольно значительную долю рынка. Лучший способ сделать это - использовать Javascript в сочетании с modernizr (или другим способом пометки «OLDIE»).
AndrewPK
19
Не возможно . Фон всегда будет настолько большим, насколько это возможно, но вы можете остановить его повторение с помощью background-repeat.
background-repeat:no-repeat;
Во-вторых, фон не входит в область поля поля, поэтому, если вы хотите, чтобы фон был только для фактического содержимого блока, вы можете использовать поле вместо отступа.
В-третьих, вы можете контролировать, где начинается фоновое изображение. По умолчанию это верхний левый угол поля, но вы можете управлять этим с помощью background-position, как это:
background-position: center top;
или возможно
background-position:20px-14px;
Отрицательное позиционирование часто используется со спрайтами CSS .
Нет, он не такой большой, как я. Это всегда один и тот же размер, но мне нужно сделать это больше.
Йохан
Ну, это невозможно. Могут быть варианты сделать это в будущих версиях CSS, но это далеко.
Микл
Этот ответ неверен. CSS3 имеет свойство background-size, которое поддерживается в IE9 +.
Downpour046
3
Посмотрите на отметку времени. В 2009 году размер фона был просто мерцанием в глазах WebKit. Не стесняйтесь обновлять его, если хотите, но уже есть множество других ответов, описывающих размер фона.
Микл
12
Не слишком сложно, если вы не боитесь углубиться в детали :)
Есть один забытый аргумент:
background-size: contain;
Это не растянет вас, background-imageкак это было бы с cover. Он будет растягиваться, пока более длинная сторона не достигнет ширины или высоты внешнего контейнера и, следовательно, сохранит изображение.
Изменить: Там также -webkit-background-sizeи -moz-background-size.
Свойство background-size поддерживается в IE9 +, Firefox 4+, Opera, Chrome и Safari 5+.
В поддержку ответа, который дал @tetra, я хочу указать, что если изображение является SVG, то изменение размера фактического изображения не является необходимым.
Поскольку SVG-файл - это просто XML, вы можете указать любой размер, который вы хотите, чтобы он отображался в XML.
Однако, если вы используете одно и то же изображение SVG в разных местах и вам нужны разные размеры, тогда использование background-sizeочень полезно. В любом случае SVG-файлы по размеру меньше растровых изображений, и их изменение на лету с помощью CSS может быть очень полезным без каких-либо затрат на производительность, о которых я знаю, и, конечно, практически без потери качества.
background-size: 200px 50px измените его на 100% 100%, и он будет масштабироваться в зависимости от потребностей тега содержимого, такого как ul li или div ... пробовал
body {
background-image: url(images/bg-body.png);
background-size:100%;/* size the background image at 100% like any responsive img tag */
background-position: top center;
background-repeat:no-repeat;}
Это позволит изменить размер фонового изображения до 100% ширины элемента body, а затем соответствующим образом изменить размер фона при изменении размеров элемента body для меньших разрешений.
put the below code in the body of you css file
background-image: URL('../images/wave-green-plain-colour.jpg');-webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;
background-size: cover;
width:100px;
Я использую фоновые изображения для кнопок, но он показывает только изображение того же размера, что и текст, даже если я установил ширину и высоту. Вместо этого я дополняю свой текст символами (неразрывные пробелы). В основном, я добавляю столько, сколько нужно, пока не появится весь фон кнопки. Так что я мог бы иметь такой код:
Другой способ - установить размер ссылки на размер фонового изображения. В таблице стилей (под # v2menu-home в приведенном выше примере) используйте display: block и установите там высоту и ширину. Это на самом деле работает. Нет необходимости в неразрывных пробелах.
Мартин Томпсон
0
Например:
фоновое изображение всегда будет соответствовать размеру контейнера (ширина 100% и высота 100 пикселей).
Кроссбраузерный CSS:
Ответы:
CSS2
Если вам нужно увеличить изображение, вы должны отредактировать само изображение в редакторе изображений.
Если вы используете тег img, вы можете изменить размер, но это не даст желаемого результата, если вам нужно, чтобы изображение было фоном для какого-то другого контента (и оно не будет повторяться, как вы, кажется, хотите) ...
CSS3 раскрыть силы
Это можно сделать в CSS3 с
background-size
.Все современные браузеры поддерживают это, поэтому, если вам не требуется поддержка старых браузеров, это способ сделать это.
Поддерживаемые браузеры:
Mozilla Firefox 4.0+ (Gecko 2.0+), Microsoft Internet Explorer 9.0+, Opera 10.0+, Safari 4.1+ (webkit 532) и Chrome 3.0+.
В частности, я , как
cover
иcontain
ценность , которые дают нам новую силу контроля , что у нас не было раньше.Круглый
Вы также можете использовать
background-size: round
это значение в сочетании с repeat:Это позволит отрегулировать ширину изображения, чтобы оно соответствовало целому числу раз в области расположения фона.
Дополнительное примечание
Если вам нужен статический размер пикселя, все равно разумно физически изменить размер фактического изображения. Это необходимо как для повышения качества изменения размера (учитывая, что программное обеспечение для обработки изображений работает лучше, чем для браузеров), так и для экономии полосы пропускания, если исходное изображение больше, чем то, что отображается.
источник
Это поддерживает только CSS 3,
Но я бы отредактировал само изображение, так что пользователю нужно меньше загружать, и оно могло бы выглядеть лучше, чем уменьшенное изображение без сглаживания.
источник
background: url('resized_image.png')\9;
для IE lt 9Если ваши пользователи используют только Opera 9.5+, Safari 3+, Internet Explorer 9+ и Firefox 3.6+, тогда ответ - да. В противном случае нет.
Свойство background-size является частью CSS 3, но оно не будет работать в большинстве браузеров.
Для ваших целей просто увеличьте фактическое изображение.
источник
Не возможно . Фон всегда будет настолько большим, насколько это возможно, но вы можете остановить его повторение с помощью
background-repeat
.Во-вторых, фон не входит в область поля поля, поэтому, если вы хотите, чтобы фон был только для фактического содержимого блока, вы можете использовать поле вместо отступа.
В-третьих, вы можете контролировать, где начинается фоновое изображение. По умолчанию это верхний левый угол поля, но вы можете управлять этим с помощью
background-position
, как это:или возможно
Отрицательное позиционирование часто используется со спрайтами CSS .
источник
Не слишком сложно, если вы не боитесь углубиться в детали :)
Есть один забытый аргумент:
Это не растянет вас,
background-image
как это было бы сcover
. Он будет растягиваться, пока более длинная сторона не достигнет ширины или высоты внешнего контейнера и, следовательно, сохранит изображение.Изменить: Там также
-webkit-background-size
и-moz-background-size
.- Источник: W3 Schools
источник
В поддержку ответа, который дал @tetra, я хочу указать, что если изображение является SVG, то изменение размера фактического изображения не является необходимым.
Поскольку SVG-файл - это просто XML, вы можете указать любой размер, который вы хотите, чтобы он отображался в XML.
Однако, если вы используете одно и то же изображение SVG в разных местах и вам нужны разные размеры, тогда использование
background-size
очень полезно. В любом случае SVG-файлы по размеру меньше растровых изображений, и их изменение на лету с помощью CSS может быть очень полезным без каких-либо затрат на производительность, о которых я знаю, и, конечно, практически без потери качества.Вот быстрый пример:
(Примечание: это работает для меня в OS X 10.7 с Firefox 8, Safari 5.1 и Chrome 16.0.912.63)
источник
background-size: 200px 50px измените его на 100% 100%, и он будет масштабироваться в зависимости от потребностей тега содержимого, такого как ul li или div ... пробовал
источник
Вы полностью можете с CSS3:
Это позволит изменить размер фонового изображения до 100% ширины элемента body, а затем соответствующим образом изменить размер фона при изменении размеров элемента body для меньших разрешений.
Вот пример: http://www.sccc.premiumdw.com/examples/resize-background-images-with-css/
источник
Просто имейте вложенные div для совместимости с разными браузерами
источник
Вы можете использовать два
<div>
элемента:Один из них - контейнер (это тот, в котором вы изначально хотели, чтобы фоновое изображение появлялось).
Второй содержится внутри. Вы устанавливаете его размер на размер фонового изображения (или размер, который вы хотите отображать).
Содержащийся div затем устанавливается для позиционирования
absolute
. Таким образом, это не мешает нормальному потоку элементов в содержащем div.Это позволяет эффективно использовать спрайт-изображения.
источник
Вы не можете установить размер вашего фонового изображения с текущей версией CSS (2.1).
Вы можете установить только:
position
,fix
,image-url
,repeat-mode
, иcolor
.источник
источник
Ты написал
но вы увидите только фон в зависимости от размера контейнера.
если у вас есть пустой контейнер с фоновым URL и каким бы ни был фоновый размер, вы не увидите bg.gif.
Если вы установите размер континента
в сочетании с кодом, который вы написали выше, вы сможете увидеть файл bg.gif.
источник
background-size
работает в Chrome 4.1, но до сих пор я не мог заставить его работать в Firefox 3.6.источник
Я использую фоновые изображения для кнопок, но он показывает только изображение того же размера, что и текст, даже если я установил ширину и высоту. Вместо этого я дополняю свой текст
символами (неразрывные пробелы). В основном, я добавляю столько, сколько нужно, пока не появится весь фон кнопки. Так что я мог бы иметь такой код:В таблице стилей:
В документе HTML:
источник
Например:
фоновое изображение всегда будет соответствовать размеру контейнера (ширина 100% и высота 100 пикселей).
Кроссбраузерный CSS:
}
источник
Это можно сделать в CSS3 с background-size
источник
Если вы хотите установить
background-size
одно и то жеbackground
свойство, вы можете использовать use:источник