在居中页面上显示带边框的图像

Question

我正在尝试以带有边框的页面为中心显示图像，边框应该有不同的填充和边距。图像将具有不同的宽度和高度。所以我需要它相应地伸展。

我把它放在体内去除所有边缘：

body {
    margin:0px 0px;
    padding: 0px;
    }

然后我用它来围绕图像放置边框。

#imgcontainer {
    position:relative;
    text-align: center;
    border-color: red;
    border-width: 1px;
    border-style: solid;
    padding: 5px;
}

然后边界延伸到整个页面。有什么方法可以阻止他吗？如果我把：

position:relative;

边框卡入到位，但图像不再居中。

如果我在#imgcontainer周围放置一个容器盒，它也会卡在页面的边缘。

我认为可以通过一些位置组合简单地解决：相对/绝对？

这就是我所说的：http://kareldc.com/dislexicon/1-motion.html

THX！

Answer 1

您好现在根据@Fabrizo Calderan定义

像这样

css

#imgcontainer {
display:inline-block;
vertical-align:top; 
}

比你的结果

Answer 2

如果我完全理解了这个问题，您可以将display: inline-block分配给#imgcontainer，否则请发布显示问题的小提示

Answer 3

你可以单独将边框效果应用于img标签。

例如，只需输入

#imgcontainer img { 
      border-color: red;
      border-width: 1px;
      border-style: solid;
     } 

Answer 4

以下是您的答案：fiddle example