Вопрос по css, html – CSS фоновое изображение, чтобы соответствовать ширине, высота должна автоматически масштабироваться пропорционально

294

у меня есть

body {
    background: url(images/background.svg);
}

Желаемый эффект состоит в том, что это фоновое изображение будет иметь ширину, равную ширине страницы, высота будет изменяться для сохранения пропорции. например если исходное изображение имеет размер 100 * 200 (любые единицы), а тело имеет ширину 600 пикселей, фоновое изображение должно иметь высоту 1200 пикселей. Высота должна изменяться автоматически, если размер окна изменяется. Это возможно?

На данный момент Firefox выглядит так, как будто он подбирает высоту, а затем корректирует ширину. Возможно, это потому, что высота - самое длинное измерение, и оно пытается избежать обрезки? яхотеть обрезать по вертикали, затем прокрутить: горизонтальное повторение отсутствует.

Кроме того, Chrome помещает изображение в центр, без повтора, даже когдаbackground-repeat:repeat дается явно, что в любом случае является значением по умолчанию.

Есть лиhtml, body { height: 100%; } Помогите? Также,кашель. thirtydot

Ваш Ответ

10   ответов
1
body{
    background-image: url(../url/imageName.jpg);
    background-attachment: fixed;
    background-size: auto 100%;
    background-position: center;
}
опишите, в чем именно заключается проблема и как ее решить, пожалуйста, не вставляйте здесь кучу кода без объяснения причин. Siavash
4

тогда его CSS является проблемой создания, поэтому его файл CSS изменится на приведенный ниже код

html {  
  background-image: url("example.png");  
  background-repeat: no-repeat;  
  background-position: 0% 0%;
  background-size: 100% 100%;
}

%; размер фона: 100% 100%; "

7

Попробуй это,

element.style {
    background: rgba(0, 0, 0, 0) url("img/shopping_bgImg.jpg") no-repeat scroll center center / cover;
}
Это именно то, что я хочу, спасибо. Henry Bui
-2

у меня сработало следующее решение:

.class {
    background-image: url(blablabla.jpg);
    /* Add this */
    height: auto;
}

Это в основном обрезает изображение и делает его вписывается,background-size: contain/cover до сих пор не подходит

11

что именно вы ищете, но вы действительно должны проверить эти прекрасные посты в блоге, написанные Крисом Койером из CSS-Tricks:

http://css-tricks.com/how-to-resizeable-background-image/

http://css-tricks.com/perfect-full-page-background-image/

Прочитайте описания для каждой из статей и посмотрите, являются ли они тем, что вы ищете.

Первый отвечает на следующий вопрос:

Есть ли способ сделать фоновое изображение изменяемым размером? Например, заполните фон веб-страницы по краям изображением, независимо от размера окна браузера. Кроме того, его размер должен быть больше или меньше при изменении окна браузера. Кроме того, убедитесь, что он сохраняет свое соотношение (не растягивается странно). Кроме того, не вызывает полосы прокрутки, просто обрезает по вертикали, если это необходимо. Кроме того, появляется на странице в виде встроенного тега.

Цель второго поста - получить следующее: «фоновое изображение на веб-сайте, которое постоянно покрывает все окно браузера».

Надеюсь это поможет.

1

Вот что сработало для меня:

background-size: auto 100%;
708

Для этого есть свойство CSS3, а именноbackground-size (проверка совместимости). Хотя можно установить значения длины, обычно он используется со специальными значениямиcontain а такжеcover, В вашем конкретном случае вы должны использоватьcover:

body {
    background-image:    url(images/background.svg);
    background-size:     cover;                      /* <------ */
    background-repeat:   no-repeat;
    background-position: center center;              /* optional, center the image */
}
Баклажан дляcontain а такжеcover

Извините за плохой каламбур, но я собираюсь использоватькартина дня от Бисваруп Гангули для демонстрации. Допустим, это ваш экран, а серая область находится за пределами видимого экрана. Для демонстрации я собираюсь принять соотношение 16x9.

Мы хотим использовать вышеупомянутую картину дня в качестве фона. Однако по какой-то причине мы обрезали изображение до 4х3. Мы могли бы установитьbackground-size свойство до некоторой фиксированной длины, но мы сосредоточимся наcontain а такжеcover, Обратите внимание, что я также предполагаю, что мы не искали ширину и / или высотуbody.

contain
contain

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

Это гарантирует, что фоновое изображение всегда полностью содержится в области расположения фона, однако, может быть некоторое пустое пространство, заполненное вашимbackground-color в этом случае:

cover
cover

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

Это гарантирует, что фоновое изображение покрывает все. Там будет не видноbackground-colorОднако, в зависимости от соотношения экрана, большая часть вашего изображения может быть обрезана:

Демонстрация с актуальным кодом

div > div {
  background-image: url(http://i.stack.imgur.com/r5CAq.jpg);
  background-repeat: no-repeat;
  background-position: center center;
  background-color: #ccc;
  border: 1px solid;
  width: 20em;
  height: 10em;
}
div.contain {
  background-size: contain;
}
div.cover {
  background-size: cover;
}
/********************************************
 Additional styles for the explanation boxes 
*********************************************/

div > div {
  margin: 0 1ex 1ex 0;
  float: left;
}
div + div {
  clear: both;
  border-top: 1px dashed silver;
  padding-top:1ex;
}
div > div::after {
  background-color: #000;
  color: #fefefe;
  margin: 1ex;
  padding: 1ex;
  opacity: 0.8;
  display: block;
  width: 10ex;
  font-size: 0.7em;
  content: attr(class);
}
<div>
  <div class="contain"></div>
  <p>Note the grey background. The image does not cover the whole region, but it's fully <em>contained</em>.
  </p>
</div>
<div>
  <div class="cover"></div>
  <p>Note the ducks/geese at the bottom of the image. Most of the water is cut, as well as a part of the sky. You don't see the complete image anymore, but neither do you see any background color; the image <em>covers</em> all of the <code>&lt;div&gt;</code>.</p>
</div>

Согласно сquirksmode.org/css/contents.html#t44 он должен работать в Chrome без каких-либо префиксов. Тем не менее, вы пробовали-webkit- префикс? Zeta
contain это как увеличение зума.cover это как увеличение масштаба.contain регулирует размер изображения в соответствии с большим размером по ширине и высоте.cover регулирует размер изображения в соответствии с меньшим размером по ширине и высоте. ahnbizcad
Это именно то, что я хочу, спасибо. Похоже, он не работает в Chrome (или Chromium, по крайней мере) - есть какие-нибудь яркие идеи? spraff
Яухен ответил (внизу этой страницы) на самом деле то, что я искал:background-size: contain Danny Beckett
@DannyBeckett: Хотя это возможно, это не то, что ищет ОП:«Я хочу обрезать по вертикали, а затем прокрутить: без горизонтального повтора». Zeta
32

На основании советов отhttps://developer.mozilla.org/en-US/docs/CSS/background-size Я заканчиваю со следующим рецептом, который работал для меня

body {
        overflow-y: hidden ! important;
        overflow-x: hidden ! important;
        background-color: #f8f8f8;
        background-image: url('index.png');
        /*background-size: cover;*/
        background-size: contain;
        background-repeat: no-repeat;
        background-position: right;
}
Хотя я использовалbackground-position: center;, это сработало для меня лучше, чемbackgound-size: cover;. Nate
Могу ли я знать, зачем намoverflow-y: hidden часть? Nam G VU
6

Просто добавьте эту строку:

    .your-class {
        height: 100vh;
    }

vh - высота окна просмотра. Это автоматически масштабируется, чтобы соответствовать окну браузера устройства.

Проверьте больше здесь:Сделайте div 100% высоты окна браузера

2

не удалось изменить размер изображения при настройке размеров браузера.

Неверный код:

html {  
  background-color: white;  
  background-image: url("example.png");  
  background-repeat: no-repeat;  
  background-attachment: scroll;  
  background-position: 0% 0%;
}


Хороший код:

html {  
  background-color: white;  
  background-image: url("example.png");  
  background-repeat: no-repeat;  
  background-attachment: scroll;  
  background-position: 0% 0%;
  background-size: contain;
}

Ключевым моментом здесь является добавление этого элемента ->background-size: содержать;

Похожие вопросы