编辑3

Question

保持w / h：当img的父级设置为display时，img的自动调整大小的能力：表格和父级的w / h不是100％？很明显，如果没有设置父母的w / h，那么它的孩子的w / h：auto就没有多大意义了。我的观点是，我想保留一个img的“可调整大小的能力”，如果它在图/ img / figcaption里面。问题描述：

图库中的大图片我们可能希望调整大小以适应窗口大小（如果更大）。如果它只是一个图像，可以轻松地将图像的w / h设置为auto（并且maxw / maxh为100％），并添加margin：auto我们甚至可以很好地居中。但如何与图/ img / figcaption完全相同呢？因为我们希望figcaption的宽度动态地匹配图像的宽度（不是在px中），我们需要设置figcaption display：table-caption（加上caption-side：bottom）和figure display：table。但是一旦我们设置了数字显示：表格及其w / h未设置（或设置为auto，否则figcaption宽度将与img不匹配），图像w / h：auto不再工作（不太令人惊讶）并且我们得到了一个不可取的100％w / h的img（如果更大则不适合窗口）。是否有任何CSS解决方案如何保持w / h：img的auto或以某种方式实现相同的可调整大小的能力，如果它在图/ img / figcaption内？

有很多关于如何居中或调整元素或图像大小的方法，例如这里＆lt; codepen.io/shshaw/full/gEiDt ＆gt;或者在这里＆lt; codepen.io/dimsemenov/pen/jhsJL ＆gt;，但是这些以及其他许多地方不适用于一组figure / img / figcaption（或者我无法制作它工作）。我真的困扰着myslef几天，没有明确的答案。

换句话说，我需要的是：图形/ img / figcaption集合完全居中，如果图像大于窗口大小，它们将调整大小，figcaption必须与图像宽度的宽度相匹配。所有这些都应该用CSS完成，而不需要在px中设置任何内容。

Answer 1

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

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

然后在你的css中设置：

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

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

编辑：将100％作为宽度或高度添加到某物意味着＆＃34; 100％的父元素＆＃34;。因此，如果您为figure元素设置宽度/高度，则内部元素可以是100％，并且它们不会破坏元素。同样，这三个都是块元素，因此您不需要将它们重新声明为display: table-caption或其他任何内容。只需使用块元素的强度即可。

编辑2：好的。这就是你需要的：

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

然后将你的无花果标题中的img和数字设置为：width：100％; height：auto;。

你的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：img里面的图形/ img / figcaption的自动调整大小的能力

1 个答案:

编辑3