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。什么都不行

- 如果我开始缩放浏览器的窗口（只需拖动一个角落），图像的高度就不会“跟随”。调整大小，但实际上不是屏幕高度的1/4。

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

有什么建议吗？

提前致谢

Answer 1

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

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

1 个答案: