Почему масштабируется изображение?

Question

[Ольга]

Здравствуйте.

Есть изображение на сайте с заданной высотой в 510px, но при заданных свойствах оно меняет свой размер, как будто обрезается по бокам. Как отрегулировать положение картинки, чтобы не обрезались бока?

.table-block {
    background-image: url(/images/table.jpeg);
    display: inline-block;
    width: 100%;
    height: 510px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    background-attachment: fixed;
}

Вот картинка на сайте:

Оригинал:

Answer 1

[Lord_Dantes]

background-size: contain

Comments

[Ольга]

тогда у картинки отступ справа:

[Lord_Dantes]

Ольга, покажите цельный блок куда вам надо это и я помогу вам.

[Ольга]

slave,

<div class="table-block" style="background-image:url('/images/table.jpeg'); height: 510px;">
</div>

element.style {
    background-image: url(/images/table.jpeg);
    height: 510px;
}

.table-block {
    background-image: url(/images/table.jpeg);
    display: inline-block;
    width: 100%;
    height: 510px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    background-attachment: fixed;
}

[Ольга]

slave, суть проблемы выяснилась: картинка прячется за левым меню. осталось придумать, как ей запретить туда залезать

Answer 2

[Eugene Chefranov]

Ну так у вас свойство background-size: cover; что заполняет все доступное пространство картинкой

Comments

[Ольга]

Если я это свойство отключу картинка становится ещё менее пригодной:

[Eugene Chefranov]

Ольга, чтобы вся картинка влазила надо так background-size: contain; но думаю такой результат тоже не удовлетворит :)

[Ольга]

Eugene Chefranov, тогда у картинки отступ справа:

[Rustam Bainazarov]

Ольга, ну так а что вы хотите? Когда вы картинку ставите на фон, браузер не знает о соотношении сторон этой картинки и вставляет её по размеру блока.

Если хотите, чтобы было автоматическое соотношение сторон, то делайте с помощью img, но тогда это будет блок и надо будет шаманить с absolute, чтобы разместить контент.

[Ольга]

Рустам Байназаров, с img попробую, а что там с absolute?

[Ольга]

Рустам Байназаров, вспомнила, img я уже пробовала но возникла проблема, что нужно сверху наложить текст, а на картинку он ни в какую накладываться не хотел

[Rustam Bainazarov]

Ольга.

вспомнила, img я уже пробовала но возникла проблема, что нужно сверху наложить текст, а на картинку он ни в какую накладываться не хотел

Вот это и есть касательно absolute.

[Ольга]

Рустам Байназаров, только сейчас поняли, сделали background-attachment, из-за этого и режет. как можно сделать, чтобы картинка прокручивалась, но не приближалась?

[Rustam Bainazarov]

Ольга, совсем не понял, что вы имеете в виду. Можете показать на примере?

Answer 3

[Сергей Пикаев]

cover - масштабирует изображение с сохранением пропорций так, чтобы его ширина или высота равнялась ширине или высоте блока.
Можно установить свойству background-size значение contain.
htmlbook.ru/css/background-size

Comments

[Ольга]

тогда у картинки отступ справа:

[Сергей Пикаев]

Ольга, уберите height: 510px;
Тогда картинка займёт всю ширину блока и не будет обрезаться по горизонтали. Будет обрезаться по вертикали. У блока, в котором находится картинка, и самой картинки разные соотношения сторон. Поэтому придётся каким-то куском жертвовать. :)

Answer 4

[bQ1]

background-size: contain

Comments

[Ольга]

тогда у картинки отступ справа:

[bQ1]

Ольга, если картинка не такого же размера как контейнер для нее, чего вы ожидали?

[bQ1]

Ольга, можете попробовать оставить cover и выровнять с помощью background-position

[Ольга]

bQ1, background-position итак стоит center

[bQ1]

Ольга, дак сделайте не центр а выровняйте как надо тык