【问题标题】：How to keep the w/h:auto resizable ability of an img inside figure/img/figcaption如何在图/img/figcaption 中保持 img 的 w/h:auto resizable 能力
【发布时间】：2014-10-27 21:29:30
【问题描述】：

当其父级设置为 display:table 并且父级的 w/h 不是 100% 时，保持 img 的 w/h:auto 可调整大小的能力？很明显，如果父母的 w/h 没有设置，那么它的孩子的 w/h:auto 没有多大意义。我的观点是，如果 img 位于 figure/img/figcaption 内部，我想保留它的“可调整大小的能力”。问题描述：

画廊中的大图像我们可能想要调整大小以适应更大的窗口大小。如果它只是一个图像，可以轻松地将图像的 w/h 设置为 auto（并将 maxw/maxh 设置为 100%），通过添加 margin:auto 我们甚至可以很好地居中。但是如何用 figure/img/figcaption 完全达到同样的效果呢？由于我们希望 figcaption 的宽度动态匹配图像的宽度（不是以 px 为单位），我们需要设置 figcaption display:table-caption (plus caption-side:bottom) 和 figure display:table。但是一旦我们设置了图形 display:table 并且它的 w/h 没有设置（或者设置为 auto，否则 figcaption 宽度将与 img 不匹配），图像 w/h:auto 就不再工作了（不足为奇) 并且我们得到了不理想的 100% w/h 的 img（如果更大，将不适合窗口）。是否有任何 CSS 唯一的解决方案如何保持 img 的 w/h:auto 或以某种方式实现相同的可调整大小的能力，如果它在 figure/img/figcaption 内？

关于如何将元素或图像居中或调整大小的方法有很多，例如这里 codepen.io/shshaw/full/gEiDt> 或这里 codepen.io /dimsemenov/pen/jhsJL>，但这些以及其他许多地方不适用于一组图形/img/figcaption（或者我无法使其工作）。我一直在困扰我自己好几天都没有明确的答案。

换句话说，我需要的是：一个 figure/img/figcaption 集完全居中，如果图像大于窗口大小，它们将调整大小，figcaption 必须与图像宽度的宽度相匹配。一切都应该用 CSS 来完成，不要在 px 中设置任何东西。

【问题讨论】：

标签： css image-resizing figure

【解决方案1】：

所以<img> 和<figcaption> 都在<figure> 元素中。这三个都是块元素。

您只需设置 <figure> 元素的高度和宽度，然后像您说的那样添加自动边距。

然后在你的css中设置：

img {
    width: 100%;
    height: auto;
}
figcaption {
    text-align: center;
    width:100%;
}

现在您的图像和标题将始终是figure 元素的宽度，文本将始终位于图像下方的中心，而较大的元素将始终位于页面的中心。

编辑：将 100% 作为宽度或高度添加到某物意味着“父元素的 100%”。因此，如果您为 figure 元素设置宽度/高度，则里面的元素可以是 100%，并且它们不会破坏元素。同样，这三个元素都已经是块元素，因此您无需将它们重新声明为 display: table-caption 或其他任何内容。直接使用块元素的强度就行了。

编辑 2：好的。这是您需要的：

在 CSS 中将图形设置为特定的高度和宽度。

然后将 fig 标题中的 img 和 figure 设置为：width: 100%;高度：自动；。

您的 html 如下所示：

<body>
    <figure>
        <img src="">
        <figcaption>Some Text</figcaption>
    </figure>
</body>

现在您需要在 CSS 中使用媒体查询来处理 <figure> 的大小

@media screen and (max-width: 600px) {
    figure {
        width: /*Whatever width you want*/
        height: /*Whatever height oyu want*/
    }
}

然后针对不同的断点重复您的媒体查询。

如果您仍然认为我错了，请编写代码笔或摆弄一个示例，我会从那里帮助您。

编辑 3

这是一个 JSFiddle，它展示了您可以使用以 % 为单位的相对测量值来制作响应式图像和元素，并保持图像以周围事物为中心。

http://jsfiddle.net/o2rv4t9h/1/

【讨论】：

正如我所写的，您不能按照您的建议设置图形的 w/h（带有 display:table），因为这样会丢失图像的调整大小能力。这才是重点！如果图{显示：表格；宽度：自动； height: auto;} figcaption 工作正常，但 img 未调整大小以适合窗口。如果图{宽度：100%; height: 100%;} 并且显示不是表格 img 已调整大小但 figcaption 与 img 宽度不匹配。
现在检查一下，看看是否有帮助。如果您想通过屏幕更改对象大小，则需要了解媒体查询。
感谢您的努力，对不起，但您重复自己说“将图形设置为特定的高度和宽度”。但是一旦我们设置它，图像的调整大小能力就会丢失。此外，如果您将 100% 宽度设置为图像，它会失去其原始大小。只有当图像大于窗口/视口时，我才想调整图像大小。
好的，据我了解您的编辑2，您正在尝试使用带有（多少个？）断点的@media 查询来补偿 img 丢失的调整大小能力。这真的不是我要走的路。可调整大小的图像应该是响应式图像，可以动态改变其尺寸，如您在此处看到的。为了更清楚，我明天将创建一个小提琴。无论如何，谢谢！
我已经用演示小提琴进行了第三次编辑，该小提琴的图像动态改变其尺寸，并保持成比例。如果您不想更改小提琴中的 css，请将其复制并粘贴到 .html 文件中并调整屏幕大小。