Масштабирование изображения

[nikromant]

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

Как вот тут http://htmlbook.ru/ надпись "Рецепты CSS" с логотипом на зеленом фоне. Что бы было понятно, что мне нужно, поиграйтесь с размерами окна. Надпись всегда остается по центру и уже когда окно браузера становится совсем маленькое правая его часть начинает скрывать рисунок.

[Kray Storm]

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

PS:

Сообщений:1

Регистрация: 14 Март 10

Круто.

Представил, как человек два-с-половиной года тщательно готовил вопрос

[nikromant]

Рассмотрю этот вариант, если ничего не получится.

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

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

Вообще, я предполагал так. Допустим картинка/фон длинной 700 пиксель, по середине пиксель 200 занимает какой то рисунок. При помощи специального атрибута(если он есть), можно задать границы по краям, около 250 пиксель, которые могут заходить за край окна.

ЗЫ Просто когда я нахожу сайт, которым буду пользоваться, то сразу регистрируюсь на форуме, что бы при необходимости не делать этого потом. До этого момента всегда хвотало ресурсов этого сайта и гугла. А, теперь вот, ну никак. Вот и решил задать вопрос.

—————-

Ерунду сказал. Что бы слой не налазил на фоновое изображение можно увиличить сомо фоновое изображение.

Edited December 23, 2012 by nikromant

[nikromant]

Нашел. Вот как здесь: http://forum.worldoftanks.ru/

[Alex Shnayder]

Вы про картинку в шапке на forum.worldoftanks.ru? Она сделана фоном с центральным позиционированием для блока, у которого задана минимальная ширина, а поверх него слева наложена картинка-затемнитель. Когда окно браузера сужается, картинка обрезается справа и слева в равной степени.

Edited December 23, 2012 by Alex Shnayder

[Kray Storm]

Тут "хитрость" в том, что используется блок с картинкой, который спозиционирован изначально так, что выходит далеко влево за границу своего родителя. Вот и получается, когда ты двигаешь окно, картинка съедается, но только до границы родителя. А потом, поскольку картинке с жесткой шириной и без всякого маргина справа до правого края родителя еще несколько сотен px - она и едет себе до самого этого края, как и положено воспитанному контенту.

Если смотреть по визуальным границам, то:

{картинка[}родитель]

Если по вложенности:

[{картинка с absolute}родитель с relative]

Элемент с absolute можно спозиционировать куда угодно, но отсчет будет идти от ближайшего родителя с не static. У нас - relative, в нормальном потоке на своем месте.

Как-то так.

===Это должно быть вторым сообщением, но форум их безжалостно объединил===

Она сделана фоном

Не совсем фоном.

<img src="http://forum.worldoftanks.ru/public/style_images/wg/logo.png" alt="Перейти к списку форумов"/>

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

Не особо-то в равной. Левый край окна упирается в букву W и "двигает" лого. А обрезается все справа.

Edited December 24, 2012 by Kray Storm

[Alex Shnayder]

А, блин, я не про ту картинку подумал.

[nikromant]

Kray Storm, спасибо большое. смысл понял, а на практике... ((

Если не тяжело не мог бы кто нибудь написать пример?

Что-то никак не выходит. Я с блоками до этого вообще не сталкивался, таблицы юзал.

Хочется как-то эти блоги переварить, а не выходит. Не могу даже сцентрировать фоновую картинку.

То никакой реакции, то вообще картинка не отображается. Я подозреваю, что делаю ошибки со style. Пока буду читать дальше, но все время уносит в сторону, что бы понять одно надо почитать про другое.

И еще раз всем спасибо за участие.