css 在随机图像下对齐文本[重复]

hfsqlsce 于 2023-03-20 发布在其他

关注(0)|答案(2)|浏览(120)

此问题在此处已有答案：

How to match width of text to width of dynamically sized image/title?（2个答案）
2天前关闭。
我需要对齐图片下的文本，这样文本就不能超过图片的宽度。但是图片是随机的，它们是在php中选择的，它们没有相同的高度和宽度。
我找到了许多解决方案，但所有这些都涉及到设置一个固定的宽度的容器，这是我不能做的事情，因为图像大小可以变化。
下面是我的代码，到目前为止没有宽度的容器：

.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如果有其他原因，你可以改变它，如果需要的话。我用的是figure和ficaption，但如果你喜欢的话，可以随意使用其他旧的标签。
我试着给容器应用一个百分比宽度，或者一个百分比最大宽度或者固定像素数，但是所有这些都不起作用，文本仍然超出图像。我更喜欢只使用HTML和CSS，如果可能的话不使用Javascript。我也把现有的html放在一个表中的一列中，但是文本仍然超出图像。
在不知道图像的宽度和高度的情况下，如何对齐图像下的文本？
谢谢

css

来源：https://stackoverflow.com/questions/75769211/align-text-under-random-image

2条答案

按热度按时间

ttcibm8c1#

如果希望文本宽度与给定图像相同，则将display: table-caption;添加到figure，如下所示：

.container {
  position: relative;
}

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

figure {
  display: table-caption;
}

<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>

赞(0）回复(0）举报 2023-03-20

rlcwz9us2#

您可以尝试使用自动调整图像大小的网格布局，如下所示：

.container {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto;
  grid-row-gap: 10px;
  text-align: center;
}

.reward-complete-image {
  max-width: 100%;
  height: auto;
}

figcaption {
  grid-row-start: 2;
}

<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>

赞(0）回复(0）举报 2023-03-20

我来回答

css 在随机图像下对齐文本[重复]

2条答案

相关问题

热门标签

最新问答