当 img 的父级设置为 display:table 且父级的 w/h 不是 100% 时，保持 img 的 w/h:auto resizable 能力？很明显，如果未设置父项的 w/h，那么其子项的 w/h:auto 就没有多大意义。我的观点是，如果 img 在 figure/img/figcaption 中，我想保留它的“可调整大小的能力”。问题描述:
图库中的大图像如果更大，我们可能需要调整大小以适应窗口大小。如果它只是一个图像，可以轻松地将图像的 w/h 设置为自动(并将 maxw/maxh 设置为 100%)，通过添加 margin:auto 我们甚至可以很好地居中。但是如何用 figure/img/figcaption 来实现同样的效果呢？由于我们希望 figcaption 的宽度动态匹配图像的宽度(不是以 px 为单位)，因此我们需要设置 figcaption display:table-caption(加上 caption-side:bottom)和 figure display:table。但是一旦我们设置了图形显示:表格并且它的 w/h 没有设置(或者设置为自动，否则 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>，但这些以及其他地方的更多内容不适用于一组 figure/img/figcaption(或者我无法使其工作)。几天来，我一直在用它困扰自己，却没有明确的答案。
换句话说，我需要的是:一个 figure/img/figcaption 集完全居中，如果图像大于窗口大小，它们将调整大小，figcaption 必须匹配图像宽度的宽度。所有这些都应该使用 CSS 完成，而无需在 px 中设置任何内容。
最佳答案
所以 <img>和 <figcaption>全部进入 <figure>元素。这三个都是 block 元素。
您只需设置 <figure> 的高度和宽度即可元素，然后像你说的那样添加边距自动。
然后在你的css中设置:
img {
width: 100%;
height: auto;
}
figcaption {
text-align: center;
width:100%;
}
现在您的图像和标题将始终是 figure 的宽度元素，文本将始终在图像下方居中，而较大的元素将始终在页面居中。
编辑:将 100% 作为宽度或高度添加到某物意味着“100% 的父元素”。因此，如果您为 figure 设置宽度/高度元素，里面的元素可以是100%，不会破坏元素。同样，这三个元素都已经是 block 元素，因此您无需将它们重新声明为 display: table-caption。管他呢。只需按原样使用 block 元素的强度即可。
编辑 2:好的。这是您需要的:
在 CSS 中将图形设置为特定的高度和宽度。
然后将无花果标题中的 img 和图形设置为: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，它演示了您可以使用以 % 为单位的相对测量来制作响应式图像和元素，并保持图像以其周围的事物为中心。
关于css - 如何保持 w/h :auto resizable ability of an img inside figure/img/figcaption，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25643326/