html图形标签大小不适应图像大小，找不到原因答案

【问题标题】：html figure-tag size doesn't adjust to the image size, can't find whyhtml图形标签大小不适应图像大小，找不到原因
【发布时间】：2013-11-23 13:39:56
【问题描述】：

请查看此 url（使用您选择的调试器）和其中的图片，这是我正在参加 atm 的课程，我无法弄清楚为什么图形标签使用完整的可用宽度而不是只是从各自的图像继承高度和宽度？ :P

http://www.student.bth.se/~kaoa13/htmlphp/bmo/artiklar.php

【问题讨论】：

标签： html size figure

【解决方案1】：

继承不像您的问题所暗示的那样起作用。由于<img> 标签在<figure> 标签内，<img> 标签是<figure> 标签的子标签。这意味着<img> 标签将继承<figure> 标签的宽度，而不是相反。如果你想覆盖这个继承，你必须在 CSS 中设置宽度值。如果您不希望它们使用完整宽度，则必须设置 <figure> 宽度。

【讨论】：

但不是每个标签都“尝试”尽可能小吗？为什么 figure 会有一个默认的全屏尺寸，这似乎是我网站上正在发生的事情？ :P 非常感谢您的快速回答！ :)
没有。标签实际上默认为其父元素的宽度减去边框和填充。如果您检查您的页面，您只需设置 <body> 标记的宽度。它设置为 934 像素。其他所有内容（<article>、<p>、<div>、<figure> 等）都继承该大小。图像小于<figure> 的原因是因为它们具有确定的尺寸，浏览器将在其中显示它们。因此，实际上，由于 HTML 中继承的性质，一切都试图尽可能大。

【解决方案2】：

我知道这是一个非常古老的问题。可能有人会帮忙解答。

img {
    width: 100%;
    height: 100%; 
    object-fit: contain;
}

figure {
    overflow: hidden,
    backgroundSize : contain,
}

【讨论】：