Масштабирование картинок и разные разрешения экранов

[RiG]

Имеется вот такой участок кода

<div class="blockwrap">                <div class="centerblock">                    <a href="/" title="Открыть в оригинальном размере" target="_blank">                        <img  src="/" alt="alt">                    </a>                </div></div>

и стили

.blockwrap{    display: table;    width: 100%;}.centerblock{    display: table-cell;    vertical-align: middle;    text-align: center;}

Слой blockwrap имеет ширину 100%, то есть растянут на весь экран. Centerblock тоже должен быть растянут на все доступное пространство родителя(он не единственный дочерний элемент)

Внутри, в centerblock вставлена картинка. необходимо реализовать вот что:

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

Если же размер картинки больше чем ширина контейнера, то её необходимо масштабировать(уменьшать), согласно размерам родителя. Как это можно реализовать?

[Zverushka]

max-width: 100%?

[RiG]

max-width: 100%?

для картинки?

Edited December 3, 2013 by RiG

[Zverushka]

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

[RiG]

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

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

[Zverushka]

http://jsfiddle.net/abw2r/

[RiG]

http://jsfiddle.net/abw2r/

У вас блок фиксированный =) Мне помогло вот это

<img width="100%" style="max-width: 320px;" src="images/zd.jpg">