首页 文章

如何保持w / h：img里面的图形/ img / figcaption的自动调整大小的能力

提问于
浏览 次
0

保持w / h：当img的父级设置为display时，img的自动可调整大小的能力：table和父级的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内？

有很多很好的方法可以使元素或图像居中或调整大小，例如<codepen.io/shshaw/full/gEiDt>或者<codepen.io/dimsemenov/pen/jhsJL>，但这些以及更多在其他地方不使用一组figure / img / figcaption（或者我无法使其工作） . 我怀疑myslef并没有明确的答案 .

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

css image-resizing figure

1 回答

  • 1

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

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

    然后在你的CSS中设置：

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

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

    编辑：将100％作为宽度或高度添加到某物意味着"100% of the parent element" . 因此，如果为 figure 元素设置宽度/高度，则内部元素可以是100％，并且它们需要将它们重新声明为 display: table-caption 或其他任何内容 . 只需使用块元素的强度即可 .

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

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

    然后将你的无花果 Headers 中的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，演示您可以使用％的相对测量值来制作响应式图像和元素，并将图像保持在中心周围的事物中心 .

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

    回复于

相关问题