CSS установить размер относительно страницы внутри div

Question

У меня есть такой код:

<div>
    <img style="max-width:90%" src="..." />
</div>

В результате получается div с размером исходного изображения и сжимаемым вместе изображением.
Итак, если исходное изображениеширина была 100 пикселей, отображаемое изображение - только 90 пикселей в ширину.

Я знаю, почему это происходит;установка css с% будет относиться к ширине родительского блока.
То, что я хочу знать, это; как мне сделать так, чтобы он ссылался на страницу , а не на div?

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

Редактировать: для записи, это будет мое решение JS;

<script>
    var maxw = 0.5*screen.availWidth;
    var maxh = 0.5*screen.availHeight;

    document.write('<style type="text/css">#lightboxImage { max-width:' + maxw + 'px; max-height: '+maxh+'px; } </style>');
</script>

Answer 1

<div style="width:100%;">
<img src="http://www.website.com/image.jpg" style="max-width:50%;/>
</div>

Если вы установите размер содержащего div на 100%, то max-width: вашего изображения будет рассчитывать 50% всей страницы.

Вы можете float содержащегоdiv или используйте position:absolute, чтобы разместить его там, где вам нравится, и убрать его из потока страницы (чтобы он не вытеснил весь ваш контент)