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添加到figure css，就像这样

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

JS Fiddle Demo

Answer 2

事件虽然你没有要求任何JS解决方案。我的解决方案是你的问题。

图像载荷变化宽度和图形高度

假设数字是img的父母

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

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

           });   
    });

Answer 3

你也可以用jquery来做这件事，即使它有点像黑客：

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

如果出于某种原因显示：表格在您的css堆栈中不适合您，或者您需要该元素为不同的显示类型，则这是一个修复。

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

3 个答案: