Как расположить изображение по центру и по ширине экрана на 100%, но только если <1024 px

Question

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

Пока классический трюк для margin: auto не работает, потому что тогда width: 100% больше не экран.

#main {
margin: 0 auto;
width: 1024px;
background-color: red;
}

#bigimage {
max-width: 1024px;
width: 100%;
}   


<div id="main" role="main">
    <img src="img/bigimage.jpg" id="bigimage">
</div>

Так что я ищу другое решение, Есть идеи, как совместить максимальную ширину и горизонтальное центрирование?

Обновление:

ОК, я почти на месте:

#main {
width: 100%;
text-align: center;
}

#bigimage {
max-width: 1024px;
width: 100%;
}

И он прекрасно работает во всех браузерах, , кроме IE8. Даже IE 7 в порядке!IE8 изменяет размер изображения без сохранения соотношения сторон!Я имею в виду, что это делает его максимальной шириной, но оригинальной шириной. Можете ли вы помочь мне, как сделать так, чтобы он не искажался в IE8?

Кроме того, живой сайт, с максимальной шириной 500px: http://ilhaamproject.com/

Answer 1

Измените свой (обновленный) CSS на следующий, и он должен работать:

#main {
    width: 100%;
    text-align: center;
}

Answer 2

если ваше изображение имеет статическое соотношение сторон, то это можно сделать с помощью max-height. Если вы добавите max-height к вашему изображению на основе ширины 1024px (726px для формата 4by3), это будет хорошо в любом браузере. См. Скрипку до применения максимальной высоты и после этого. Я просто использовал ширину 400px.

HTML:

    <div id="container">
        <img id="bigDude" src="http://www.ladygagapic.info/wallpaper/flower-17.jpg" />
    </div>

CSS:

#container{text-align:center; border:1px solid gray;}
#bigDude{max-width:400px; width:100%;}

НО, если ваши изображения не имеют одинакового размера или соотношения сторон, вам может понадобиться немного JavaScript, например, как Facebook заставил это сделать .

Answer 3

Демо

В итоге я выбрал display:table-row ... да ладно: P

Answer 4

У вас есть #bigimage img внутри #main div. Поскольку основной div имеет ширину 1024 пикселя, 100% всегда будет 1024. В результате вы всегда будете видеть 1024 пикселя. Если вы удалите атрибут ширины из #main или измените его на 100%, вы должны начать видеть то, что ищете.