div изменить размер с помощью браузера

Я пытаюсь создать простой просмотрщик изображений, который изменяется с шириной и высотой браузера. Кажется, я почти там. Однако мне нужен намек на то, как закончить это. Вот код. Я не хотел использовать jquery, потому что я стараюсь, чтобы это было максимально простым и легким.div изменить размер с помощью браузера

Спасибо, MK

<style type="text/css"> 
body { 
    background-color: #999; 
} 
#fullscreenPhoto { 
    border: thin solid #F00; 
} 
</style> 

<body onresize="resizeImage()"> 
<div onload="resizeImage()" margin="0" border="0" id="fullscreenPhoto"> 
    <img src="resizeImage.jpg" width="100%" > 
</div> 
<script type="text/javascript"> 
var divResize = document.getElementById('fullscreenPhoto'); 

function resizeImage() 
{ 
    var window_height = document.body.clientHeight 
    var window_width = document.body.clientWidth 

    var image_height = divResize.offsetHeight 
    var image_width = divResize.offsetWidth 

    var height_ratio = image_height/window_height 
    var width_ratio = image_width/window_width 

    if (height_ratio > width_ratio) 
    { 
     divResize.style.width = "auto" 
     divResize.style.height = "100%" 
    } 
    else 
    { 
     divResize.style.width = "100%" 
     divResize.style.height = "auto" 
    } 
} 
</script> 
</body>

источник

2012-05-25 mkrisch

Что именно вам не хватает? – chucktator

Я не уверен. Это работает для вас? Я добавил сплошную красную границу вокруг div для тестирования. Размер div не изменяет размер браузера. – mkrisch

Как насчет установки MaxHeight и MaxWidth вместо ширины и высоты, где он должен быть 100%. Таким образом, вы можете даже не нужно указать «Auto»

Таким образом, в вашем примере это будет

if (height_ratio > width_ratio) 
{ 
    divResize.style.maxHeight = "100%" 
} 
else 
{ 
    divResize.style.maxWidth = "100%" 
}

источник

2012-05-25 17:14:29 walmik

Не повезло с этим исправлением. Он работает на вас? Одна вещь, которую мне интересно, - это возможно изменить размер браузера? – mkrisch

oops, maxWidth и maxHeight - это свойства, которые действуют только на элементы уровня блока или на элементы с абсолютной или фиксированной позицией. Может быть, установка «позиции» для divResize на фиксированное или абсолютное может работать? – walmik

Я добавил еще один ответ, который позволяет вам получить чистый CSS (без JavaScript) – walmik

The div никогда не загружен. Это примитивный тип HTML. Вы должны положить оператор onload в тег изображения. И поскольку изображение находится внутри Div, вам не нужно изменять его размер. Изображение растягивается по изображению.

источник

2012-05-25 17:18:29 chucktator

Хорошо, вот еще один ответ (на основе вашего комментария о желании установить «растяжку» на основе «высоты» ... это одно событие не использует JavaScript! Просто убедитесь, что высота свойства CSS и тела CSS установлен на 100%, а затем установить свойство изображения высота CSS 100%

HTML:

<div margin="0" border="0" id="fullscreenPhoto"> 
    <img src="http://www.walmik.com/wp-content/themes/spring/images/motif.png" > 
</div>

CSS:

html, body {height: 100%; margin: 0; padding: 0;} 
#fullscreenPhoto img {position:fixed; top:0; left:0; width:auto; height:100%;}

и, наконец, здесь са рабочий пример: http://jsfiddle.net/XwBxh/

А вот S небольшое дополнение в случае, если вы хотите поддерживать IE6:

html { overflow-y: hidden; } 
body { overflow-y: auto; } 
#fullscreenPhoto img { position:absolute; z-index:-1; }

источник

2012-05-25 18:01:30 walmik

div изменить размер с помощью браузера

ответ

Смежные вопросы