将html图形宽度设置为与其包含的图像宽度相同 [英] Set html figure-width to same as width of image it contains

问题描述

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

When having a image inside a figure-tag, the figure width is 100%. How do I make so that the the figure always will have the same width as the image? Here's my current code:

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

推荐答案

添加 display：table to figure css like this

Add display:table to figure css like this

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

JS小提琴演示

这篇关于将html图形宽度设置为与其包含的图像宽度相同的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！