javascript - 使图像高度为窗口高度的 1/4

Question

基于响应式设计和 fluid images，我尝试使图像的高度始终为窗口高度的 1/4。

图片是数据库随机抓取的图片，不知道会不会被拉长。

这是我到现在为止

//after the path of the image is randomly collected with websockets
elem = document.createElement("img");
 elem.id="frontimage";
 elem.setAttribute("height", window.innerWidth/4+'px');

document.getElementById("icon").appendChild(elem);  

//this is triggered after window.onresize (see below)-in case the browser window is scaled
function img_adjust( img ) {
 var beholdItsTheNewHeight = window.innerWidth/4;
img.style.height  = beholdItsTheNewHeight  + 'px';
}

window.onresize = function() {
img_adjust( document.getElementById('frontimage') );
}


<div id="icon"  ></div>

(基于 migf1 的 anser，来自 here ，抱歉是希腊语)

就是这样。工作正常，如果你只是打开一个浏览器并且浏览器扩展到整个屏幕。

问题

-我根本无法将图像与其容器的中心对齐。我尝试了 margin、padding、float、position:absolute。什么都行不通

-如果我开始缩放浏览器窗口(简单地拖动一个 Angular )，图像的高度不会“跟随”。调整大小，但实际上不是屏幕高度的 1/4。

-如果我打开浏览器并且它没有扩展到整个屏幕，则图像的高度不会缩放到屏幕高度的 1/4。

有什么建议吗？

提前致谢

Answer 1

您可以在容器 DIV 上使用 css 属性 #icon{ text-align: center;} 使图像在 DIV 中水平居中。看:http://jsfiddle.net/2vxmX/