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

Question

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

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

Answer 1

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

Answer 2

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

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

figure {
    overflow: hidden,
    backgroundSize : contain,
}