jquery - 应用边框时保持元素位置固定

Question

我正在尝试创建一个在线图片框架示例。我有一个图像，然后可以对其进行自定义以显示不同的边框、安装和框架尺寸。这些通过向图像周围的相应元素添加边框来说明。用户可以更改这些值，这将显示在预览中。

理想情况下，我想让图像在包含的 #preview div 中居中，并在其周围应用边框。这可以单独使用 CSS 完成还是需要 JS/jQuery？

这是一个例子:http://www.peaknature.co.uk/test.php

我一开始尝试固定图像的位置，但这会导致包含的 div 全部被破坏。

这是一些代码:

布局:

<div id="preview">
<span id="frame-preview">
    <span id="mount-preview">
        <span id="border-preview">
            <span id="image-preview" class="id-number" ><img src="image.jpg" /></span>
        </span>
    </span>
</span>

CSS:

#preview {
    width:70%;
    min-height:300px;
    padding:20px 0;
    margin:0 auto;
    text-align: center;
}
#frame-preview {
    outline:0px solid pink;
    display:inline-block;
    position:absolute;
    top:60px;
}
#mount-preview {
    outline:0px solid green;
    display:inline-block;
}
#border-preview {
    outline:0px solid blue;
    display:inline-block;
}
#image-preview {
    display:inline-block;
}
#image-preview img {
}

JS:

        $('#border_size').change(function(event) {
            var value = $('#border_size').val();
            //alert(value);
            $("#border-preview").css({ outlineWidth: value });
        });

        $('#mount_size').change(function(event) {
            var value = $('#mount_size').val();
            //alert(value);
            $("#mount-preview").css({ outlineWidth: value });
        });

        $('#frame_size').change(function(event) {
            var value = $('#frame_size').val();
            //alert(value);
            $("#frame-preview").css({ outlineWidth: value });
        });

谢谢。

Answer 1

尝试这样的事情

 #frame-preview {
   border: 0 solid #FFC0CB;
   display: block;
   margin: 0 auto;
}