基于响应式设计和 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。
有什么建议吗？
提前致谢
最佳答案
您可以在容器 DIV 上使用 css 属性 #icon{ text-align: center;} 使图像在 DIV 中水平居中。看:http://jsfiddle.net/2vxmX/
关于javascript - 使图像高度为窗口高度的 1/4，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19991471/