基于响应式设计和流畅的图像，我尝试使图像的高度始终为窗口高度的 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 的分析器，从这里开始，对不起它的希腊语）
就是这样。工作正常，如果你只是打开一个浏览器并且浏览器扩展到整个屏幕。
问题
- 我根本无法将图像与其容器的中心对齐。我试过了margin, padding, float, position:absolute。没有任何效果
- 如果我开始缩放浏览器的窗口（只需拖动一个角），图像的高度不会“跟随”。调整大小，但实际上不是屏幕高度的 1/4。
- 如果我打开浏览器并且它没有扩展到整个屏幕，则图像的高度不会缩放到屏幕高度的 1/4。
有什么建议吗？
提前致谢