Фоновая картинка

M
На сайте с 23.08.2012
Offline
62
331

Перепробовал много вариантов, но ни как не могу найти правильное решение.

В первом варианте всё работает, картинка сжимается при изменении размера окна браузера

1.

<!DOCTYPE html>

<head><style>

.block{width:100%;height:auto;background: no-repeat;margin:0;padding:10px;}

</style></head><body>

<header></header><page>

<p></p>

<div class="block"><img src="../img.jpg"></div>

<p></p>

</page><footer></footer></body></html>

Во втором варианте фоновая картина остаётся в заданных размерах

2.

<!DOCTYPE html>

<head><style>

.block{width:100%;max-width:800px;height:462px;background:url("../img.jpg")

</style></head><body>

<header></header><page>

<h1></h1>

<p></p>

<div class="block"></div>

<p></p>

</page><footer></footer></body></html>

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

Подскажите где что не так.

S
На сайте с 30.09.2016
Offline
469
#1

background-size: contain;
Отпилю лишнее, прикручу нужное, выправлю кривое. Вытравлю вредителей.
M
На сайте с 23.08.2012
Offline
62
#2
Sitealert:
background-size: contain;

Спасибо с шириной разобрались, а вот высоту не как не смог убрать.

100% 100% растягивает изображение, 100% 50% ни чего не меняет, auto тоже не решило ситуацию.

G
На сайте с 04.10.2010
Offline
102
#3

Mixalko, max-height:100%;

Заказать сайт с SEO оптимизацией https://impossible-studio.com/ Рейтинг хостингов 2021 https://impossible-studio.com/reyting-hostingov-2021/
IL
На сайте с 20.04.2007
Offline
418
#4
Mixalko:
а вот высоту не как не смог убрать.

Сделать равной нулю?..

сделать 100%?

Сделать "как у изображения"?

Если последнее (и известны ширина и высота), можно вставить прозрачный пиксель соответствующих размеров...

... :) Облачные серверы от RegRu - промокод 3F85-3D10-806D-7224 ( http://levik.info/regru )
M
На сайте с 23.08.2012
Offline
62
#5
Gigabajt:
Mixalko, max-height:100%;

не помогло

---------- Добавлено 24.09.2019 в 07:43 ----------

ivan-lev:
Сделать равной нулю?..
сделать 100%?
Сделать "как у изображения"?
Если последнее (и известны ширина и высота), можно вставить прозрачный пиксель соответствующих размеров...

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

Уменьшил картинку в 2 раза под моб. устройства, но чем меньше экран тем пустое место под картинкой всё равно увеличивается.

IL
На сайте с 20.04.2007
Offline
418
#6
Mixalko:
Уменьшил картинку в 2 раза под моб. устройства, но чем меньше экран тем пустое место под картинкой всё равно увеличивается.

Если нужно "заполнить" пустое место, то

background-size: cover;

Однако, картинка при этом может быть обрезана..

M
На сайте с 23.08.2012
Offline
62
#7
ivan-lev:
Если нужно "заполнить" пустое место, то
background-size: cover;


Однако, картинка при этом может быть обрезана..

Картинка показывается полностью, а из-за настроек она обрезается. Пока лучший вариант background-size: contain;, но тут проблема с высотой.

Сейчас экспериментирую с @media only screen, пока не определился или уменьшенную картинку вставлять или height: px; везде прописывать, но это тоже не лучший вариант.

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий