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;
}

Answer 2

#preview { width:70%; min-height:300px; padding:5px; margin:5px auto; text-align: center; border:1px solid #000; }

#frame-preview { border:0px solid pink; display:inline-block; position:relative; top:0px; margin:20px auto;}

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

2 个答案: