将HTML中的图像宽度设置为与其包含的图像宽度相同。

Question

当在figure标签中放置一张图片时，figure的宽度为100%。如何使figure始终具有与图像相同的宽度？以下是我当前的代码：

HTML：

<figure>
    <img src="http://www.google.com/images/srpr/logo3w.png" alt="" />
</figure>

CSS：

* {
    margin: 0;
    padding: 0;
}

figure {
    border: 1px solid red;
}

img {
    border: 1px solid blue;
    vertical-align: top;
}

- nicolas

Answer 1

将display:table添加到figure css中，就像这样。

figure 
{
    display:table;
    border: 1px solid red;
}

JS Fiddle Demo

- Sachin

---

display: inline-block; 更好。 - Romain Pellerin

@RomainPellerin 谢谢你的建议，但你能解释一下在这里使用 inline-block 的好处吗？谢谢。 - Sachin

由于每个浏览器可能应用的默认显示属性不同。 - Romain Pellerin

Answer 2

尽管您没有要求任何JS解决方案，这里是我为您的问题提供的解决方案。

在图像加载时更改figure的宽度和高度

假设figure是img的父元素

   $(document).ready(function(){
         $("img").load(function(){

              $(this).parent().width( $(this).width());

           });   
    });

- Anoop

---

这实际上是我最喜欢的答案。对于这种特殊情况，没有一个简单的纯CSS解决方案。http://codepen.io/gpspake/pen/WbpBop - ItsGeorge

Answer 3

这是解决我的问题的CSS代码：

figure{
display: table-cell;
}

一个纯CSS的解决方案，我在寻找同样问题的解决方案时发现了它。我真的不想使用JavaScript的方法，而这个方法对我很有效。 注意：我在开发WordPress的自定义主题时遇到了这个问题。

- ToongeePrime

---

但是为什么它解决了这个问题，请编辑您的答案并解释。 - Rohit Gupta

@RohitGupta，这只是一个纯CSS的解决方案，我在寻找解决同样问题的方案时发现了它。我真的不想采用JavaScript方法，这个方法对我很有帮助。注意：我在开发WordPress上的自定义主题时遇到了这个问题。 - ToongeePrime

你误解了。我不需要解释。如果你将评论与你的答案合并，它会变得更好。否则，它可能会被社区机器人删除。 - Rohit Gupta

Answer 4

你也可以用jQuery来实现这个，虽然有点hack：

var imgWidth = $("figure img").width();
     $("figure").width(imgWidth);

如果由于某些原因，在您的CSS堆栈中display: table无法正常工作，或者您需要该元素成为不同的显示类型，则可以使用此修复方法。

- Mike Legacy