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

[b0s]

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

У меня есть страница, в которой располагается список галерей. Всего галереи четыре. Вчера обнаружил, на старых разрешениях из всего списка галерей видно только первую фотографию слева. А самый маленьких вообще видно только её верхнюю границу. Перенаписал код, часа наверное за четыре, за пять. Был доволен и счастлив, т.к. в IE6 при любых разрешениях, при использовании которых были проблемы, всё стало отображаться как я хотел. Окно браузера можно было уменьшать как угодно, картинки всё равно были там где были при открытии страницы, но масштабировались. Но моя радость не долго со мной пробыла... Все миниатюры в галереи были горизонтальными и я решил попробовать заменить одну из горизонтальных миниатюр, миниатюрой фотографии вертикального формата. Стало грустно потому, что фотографии масштабировались по процентной ширине. Эта же фотография высокая, а не широкая и если ей задавать высоту, то это применяется ко всему стилю, а это влияет на все фотографии. В конечном итоге размер фотографий оказывается непредсказуемым..

Конечно занудство и идеализм, мучающие мою голову зудят, что надо потратить кучу сил и времени, но пока что не соглашаться на внедрение JS, для решения этого вопроса. Очень хочу решить вопрос CSS, но как не могу предположить.

На всякий случай подведу итог того, что пытаюсь сделать:

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

Искренне прошу меня простить, ежели повторяю тему. Провёл поиск по форуму, но не нашел. Также искал в гугл, также безрезультатно.

Пожалуйста, код:

<style>
			html, body {
				text-align:center;
				height:100%;
				width:100%;
				margin:0;
				padding:0;
			}

			#gallery {
				display:inline-block;
				white-space:nowrap;
			}
			#gallery a, #gallery a:link,#gallery a:hover {
				vertical-align:top;
				border:0px solid green;
				display:inline-block;
				font-family: Comic Sans MS;
				font-size: 100%;
				font-weight:bold;
				WIDTH:25%;
				HEIGHT:25%;
				margin:2.5% 9%;
				text-decoration:none;
			}
			#gallery a img{
				WIDTH:100%;
				border:0px;
			}
			#gallery a div{

				white-space:normal;
				text-decoration:underline;
			}
		</style>
		<div id="gallery">
			<a href="gal1/" style="color:#993366;">
				<img alt="gal1" src="pics/gal1_thumb.jpg" />
				<div>gal1</div>
			</a>
			<a href="gal2/" style="color: #800000;">
				<img alt="gal2" src="pics/gal2_thumb.jpg" />
				<div>gal2</div>
			</a>
			<br />
			<a href="gal3/" style="color: #FFFFFF;">
				<img alt="gal3" src="pics/gal3_thumb.jpg" />
				<div>gal3</div>
			</a>
			<a href="gal4/" style="color: #FF99CC;">
				<img alt="gal4" src="pics/gal4_thumb.jpg" />
				<div>gal4</div>
			</a>
		</div>

Буду благодарен за ваши ответы!

Ещё кстати, наткнулся на вот такой вариант сохранения пропорций, но не могу понять как его применить когда размер миниатюр зависит от размера окна

Edited June 26, 2011 by b0s

[psywalker]

Ты лучше приведи несколько скриншотов, того как нужно и как НЕ должно быть. И с пометками.

[b0s]

Ты лучше приведи несколько скриншотов, того как нужно и как НЕ должно быть. И с пометками.

При любом размере окна браузера, не должно быть так:

Правая фотография, по высоте, физически, такая же как и остальные, но остальные фотографии меньше, так как на них действует {width:25%}, а на эту высокую - нет. То есть, оно действует, но её ширина и так достаточно мала и пропорционально ширине, её высота конечно больше.

Edited June 26, 2011 by b0s

[psywalker]

Смотри дружище, тут значит следующая ситуация. Если ты хочешь сохранять пропорции при любом размере картинок, то ты просто не должен ограничивать у них ширину или высоту, т.е. в случае например проставления только ширины, высота сама должна подогнаться какая нужно. Это делает сам браузер, подбирает пропорции.

[b0s]

Смотри дружище, тут значит следующая ситуация. Если ты хочешь сохранять пропорции при любом размере картинок, то ты просто не должен ограничивать у них ширину или высоту, т.е. в случае например проставления только ширины, высота сама должна подогнаться какая нужно. Это делает сам браузер, подбирает пропорции.

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

Но теперь я обнаружил, другую проблему. Когда окошко уменьшаешь фотографии съезжаются. И только после обновления страницы, встают на свои места.

Такс... добавил к области со списком галерей {width:100%}, ссылки как то странно себя ведут.. Специально добавил границы вокруг объектов

После загрузки страницы:

После изменения размера:

[psywalker]

Наверное всё же лучше ограничить ширину, сделать минималку, чтобы таких казусов не возникало.

[b0s]

psywalker, простите но я не понимаю вас. То, что вы видели на фотках это как раз результат ширины. Ширина процентная высчиталась из размера области просмотра, и ссылки соответственно занимаю те самые 23% ширины сдвигаясь влево (при уменьшении окна). Если ширину ссылки ещё увеличить, ссылка, при развёрнутом на весь экран браузере, будет слишком широкой, в результате она будет занимать пустое место вокруг миниатюры, которое по идее должно быть занято процентным отступом. Ещё, в добавок, что самое грустное, пустое пространство вокруг миниатюры будет кликабельна из-за избыточной ширины ссылки.

[psywalker]

Т.е. проблема в том, что при сужении экрана ссылки налезают друг на друга?

[b0s]

Т.е. проблема в том, что при сужении экрана ссылки налезают друг на друга?

Теперь именно так. Ширина - процентная. 23% от 1440 - слишком широко, а от 600, например, слишком мало, и ссылка либо шире картинки, либо уже. Белые границы на снимках, это границы ссылок. Понимайте? Я так вижу что это не ссылки друг на друге, а картинки которые не умещаются в границы ссылок, которые образуются от заданной 25% ширины.

Edited June 27, 2011 by b0s

[psywalker]

Т.е. проблема в том, что при сужении экрана ссылки налезают друг на друга?

Теперь именно так. Ширина - процентная. 23% от 1440 - слишком широко, а от 600, например, слишком мало, и ссылка либо шире картинки, либо уже. Белые границы на снимках, это границы ссылок. Понимайте?

Тогда делай для картинок максималку. Чтобы при сужении они не были слишком большие.

[b0s]

Если у картинки будет задана ширина в процентах и высота в процентах, она не будет уменьшаться пропорционально.

На данный момент у неё процентная только высота.

[b0s]

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

jsfiddle.net

Изменяйте размер окна браузера, по разному, и пропорционально и не пропорционально, и станет наверное понятно в чём именно проблема.

Edited June 27, 2011 by b0s

[psywalker]

Давно б уже пример показал, вот так правильнее в общем http://jsfiddle.net/aArTM/6/

[b0s]

Давно б уже пример показал, вот так правильнее в общем http://jsfiddle.net/aArTM/6/

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

Мне этот вариант, правильным не кажется.

[psywalker]

Давно б уже пример показал, вот так правильнее в общем http://jsfiddle.net/aArTM/6/

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

Мне этот вариант, правильным не кажется.

Ну тогда только как нибудь так http://jsfiddle.net/aArTM/7/

[b0s]

Давно б уже пример показал, вот так правильнее в общем http://jsfiddle.net/aArTM/6/

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

Мне этот вариант, правильным не кажется.

Ну тогда только как нибудь так http://jsfiddle.net/aArTM/7/

Тогда фотографии вообще не поддаются масштабированию при изменении размера окна.