html - 为所有浏览器调整大小的简单模态容器

Question

我有一个容器，一旦用户选择某个图像，它就会弹出并在页面上显示图像。这在 chrome 中看起来很好(取决于分辨率)，但是我在 Opera 和 FF 中被告知它可以切断图片 Angular 落甚至顶部的 X(结束符号)。

我想知道是否有一种方法可以将叠加层设置为根据它打开的图像的大小显示，并且无论分辨率如何都使其居中显示，但我不知道该怎么做。

<style>
#basic-modal-content {display:none;}

/* Overlay */
#simplemodal-overlay {background-color:#000;}

/* Container */
#simplemodal-container {height:800px; width:800px; color:#bbb; background-color:black; padding:2px;}
#simplemodal-container .simplemodal-data {padding:8px;}
#simplemodal-container code {background:#141414; border-left:3px solid #65B43D; color:#bbb; display:block; font-size:12px; margin-bottom:12px; padding:4px 6px 6px;}

#simplemodal-container a {color:#ddd;}
#simplemodal-container a.modalCloseImg {background:url(../../img/basic/x.png) no-repeat; width:25px; height:29px; 

display:inline; z-index:3200; position:absolute; top:-15px; right:-16px; cursor:pointer;}
#simplemodal-container h3 {color:#84b8d9;}

Answer 1

除了使用以像素为单位的 width 和 height 值，您可以使用百分比 (%) 来使其具有响应性吗？

还有 autoResize 和 autoPosition 属性可能有助于不同的浏览器和分辨率。

http://www.ericmmartin.com/projects/simplemodal/