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

Question

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

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

Answer 1

像这样添加display:table到figurecss

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

JS 小提琴演示

Answer 2

事件虽然您没有要求任何 JS 解决方案。这是我为您的问题提供的解决方案。

在图像加载时改变图形的宽度和高度

假设 figure 是 img 的父级

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

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

           });   
    });

Answer 3

您也可以使用 jquery 来执行此操作，即使它有点 hack：

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

如果由于某种原因 display: table 在您的 css 堆栈中不适合您，或者您需要该元素是不同的显示类型，这是一个修复。