个人中心
文章发布
退出
作者热门文章
- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时，我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
24
4
当 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*/
}
}
然后针对不同的断点重复您的媒体查询。
如果您仍然认为我错了，请制作一个代码笔或摆弄一个示例，我会从那里帮助您。
这是一个 JSFiddle，它演示了您可以使用以 % 为单位的相对测量来制作响应式图像和元素，并保持图像以其周围的事物为中心。
关于css - 如何保持 w/h :auto resizable ability of an img inside figure/img/figcaption，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25643326/
24
4
0
好的，所以我有 3 张图片，图片中间有边框。图像设置为 0.5 不透明度，然后在悬停时设置为 1.0 不透明度。我希望图形说明及其边框始终位于图像之上。现在，图形说明及其边框位于图像下方，当我将鼠标悬
我正在尝试制作 当内容的宽度超过 的宽度时元素呈现滚动条兄弟，通常是当内容是一个长 URL 或一个很长的单词时。 以下代码改编自this answer它适用于 IE 11 和 Edge 15，但不适
在网上搜索了数周，但找不到满足我所有需求(仅部分需求)的答案，非常欢迎帮助。 我想要的和已经完成的: 纯 HTML5 兼容和 CSS 在文章中显示图片 图片必须有标题 标题必须在图片下方 标题必须限制
我试图将我的 figcaption 放在 img 下。我不知道为什么它会向右移动。我在页面上还有其他图片，它们的标题没有向右显示，而是在图片下方，但在这张图片上，它不在下方，而应该在下方。有人可以帮助
我正在尝试使用 jquery.caption ( https://github.com/louisbros/jquery.caption )。我希望标题位于带有白色文本的黑色矩形中。当我将鼠标悬停在我
当前: 我有 10 张带有 figcaption 的单独图像，它们用作复选框。当用户在图像上滚动鼠标时，图像上会显示 figcaption。一旦用户选择图像并移出鼠标，图形说明就会消失。 问题和预期结
我想要在这张图片中间的图片旁边添加一个图形说明。我怎样才能做到这一点？我试过这样: xxx 但标题仍然在图像的顶部。 最佳答案 您可以将图形显示为 flex，然后使用自动边距
我想知道为什么我的figcaption没有显示 我正在执行通常的代码: Fimmvörðuháls 截图:http://prntscr.com/
我有一个问题，figcaption 比 img 宽，因此突出到它的右边。我对标题的 width 进行了硬编码并且它有效，但仅适用于相同宽度的图像。 HTML Vader e
在一个对话框中，我想在同一行显示几个带有标题的下载链接:
fiddle :http://jsfiddle.net/dXd26/ 代码: HTML:
我想添加一个figcaption，这是一段解释我的图像的段落，我想把它放在图像本身的旁边(如果段落太长，我希望文本可以完成旁边的空间后在图像下方)。我搜索了命令和 CSS，但没有找到任何东西。 最佳答
我正在为一张图片制作一个无形标题，我想将它链接到一个单独的 pdf 文档。可见http://cascade.webuda.com/collection.html哪里说 2013 cascade luc
TL;DR:是的，我“遗漏了一些明显的东西”。对此感到抱歉。 将图像放在图形中效果很好，所有边框都很好地嵌套: 但是当我添加一个图形标题时，图像的大小保持不变并溢出图形: 这就像图像的“高度:100%
我即将从头开始开发我的第一个 WordPress 主题:http://bit.ly/16baqTI 主页上的响应式图像网格出现问题。当您缩小浏览器视口(viewport)时，图像无法正确缩放。这个测试
我正在构建一个包含 3 行 3 列图像的导航框。我的目标是在每张图片下方添加一些文字。我今天遇到了“figcaption”，尽管它接缝就像完美的标签，但我无法接缝以使其正确显示。 问题在我添加“fig
我有一个网站，当用户将鼠标悬停在图片上时，图形标题会向上滑动。 我的屏幕分辨率是 1024 x 768，图像分辨率是 300 x 400 像素。它非常适合我的屏幕分辨率。最近我意识到响应式网站的重要性
假设我有以下 HTML: The Sun - a sinister and destructive force. Image from the SOHO research facility. 如
我在 figure 中有一个图像和一个标题标签。我想知道如何获得 figcaption位于 img 旁边并垂直居中，如所附图像。 这是一个 jsfiddle我设置。 谢谢! 最佳答案 在这里，只需将
我有一个带有图形说明的图形。我想将 figcaption 放在 figure img 旁边，如下图所示。 我已经尝试过转换 rotate 和 origin 之类的方法，但问题似乎在于它不适合父对象的新
我是一名优秀的程序员,十分优秀！