将html图形宽度设置为与其包含的图像宽度相同

在地物标记内有图像时，地物宽度为100%。如何使图形始终具有与图像相同的宽度？以下是我当前的代码：

HTML:

---

将

display:table

添加到

figure

css，如下所示

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

---

事件，但您尚未要求任何JS解决方案。以下是我针对您问题的解决方案

关于图像负载改变图形的宽度和高度

假设数字是img的父项

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

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

           });   
    });

---

您也可以使用jquery实现这一点，尽管它有点像黑客：

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

---

如果出于某种原因，display:table在css堆栈中不适合您，或者您需要该元素成为不同的显示类型，则可以修复此问题。

display:inline block；会是better@RomainPellerin谢谢你的建议，但是你能在这里解释一下使用

内联块的好处吗？谢谢。因为每个浏览器都可能应用默认的显示属性，所以这实际上是我最喜欢的答案。对于这种特殊情况，没有简单的纯css解决方案。
   $(document).ready(function(){
         $("img").load(function(){

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

           });   
    });

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