0

基于响应式设计和流畅的图像,我尝试使图像的高度始终为窗口高度的 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。

有什么建议吗?

提前致谢

4

1 回答 1

1

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

于 2013-11-15T01:12:51.577 回答