Html 在随机图像下对齐文本

发布于03月17日

我需要对齐图像下的文本，因此文本不应超过图像宽度. 然而，这些图像是随机的，它们是在php中 Select 的，它们的高度和宽度不同.

我找到了很多解决方案，但它们都涉及到为容器设置固定的宽度，这是我不能做的，因为图像大小可能会变化.

以下是我到目前为止在容器上没有宽度的代码:

.container {
  position: relative;
}

.reward-complete-image {
  max-width: 70vw;
  max-height: 70vh;
}

<div class="container">
  <figure>
    <img class="reward-complete-image" src="https://wallpapercave.com/wp/bvJq0ra.jpg">
    <figcaption>This picture can change it is dynamically generated, thus other images could have a different width and height. This is why the solution should allow for the text under the image to be ".</figcaption>
  </figure>
</div>

现有的css如果出于其他原因，您可以根据需要进行更改. 我使用了图形和虚构，但如果您愿意，也可以随意使用其他较旧的标签.

我试图对容器应用一个百分比宽度，或者一个百分比的最大宽度或固定的像素数，但这些都不起作用，文本仍然超出了图像. 如果可能的话，我更喜欢只使用HTML语言和css，不使用Java脚本.我还将表格中现有的html放在一列中，但文本仍然超出了图像范围.

在不知道图像的宽度和高度的情况下，如何对齐图像下方的文本？

谢谢

<div class="container"> <figure> <img class="reward-complete-image" src="https://wallpapercave.com/wp/bvJq0ra.jpg"> <figcaption>This picture can change it is dynamically generated, thus other images could have a different width and height. This is why the solution should allow for the text under the image to be ".</figcaption> </figure> </div>

Html 在随机图像下对齐文本

推荐答案

Html相关问答推荐

springBoot + Thymeleaf：属性中的UTF-8

srcset和大小总是下载最大的

如何防止下拉菜单内的Bootstrap列表行包装？

为什么在这种情况下是弹性基础：自动不解决内容的大小？

我似乎不能正确地将我的导航栏居中'

如何使我的组织 struct 图的连接线响应？

HTML表行悬停仅适用于偶数行

在css嵌套 Select 器中，尾随的`&；‘是什么意思？

未知高度正在应用于前标记

CSS中的转换属性是如何工作的？

在R中从网页上的特定iframe中提取图形数据

如何将元素与常规文本垂直对齐

使单行路径的 svg 填充父级的 100% 宽度

如何将两个平行 div 的页面内的表格居中？

使用 css 将内容居中并向左对齐？

当我将鼠标悬停在测试类上时，左侧类的 colored颜色没有改变

如何使用 CSS Flex 设计一个导航栏，其中一组项目左对齐而另一组项目右对齐？

在 html 邮箱的左侧和右侧制作多个元素很热门吗？

使用模板循环每行列出 3 个 bootstrap 卡

正确使用视频作为背景