Question

我有一个简单的单页，其中包含一个固定宽度的内容列（body上的固定宽度），除其他外，还包含数字作为块。

数字总是只包含一个图像，一个可选标题，并带有边框和背景样式。图像最好保持原始尺寸，但如果图形的边框宽度不适合列，则应按比例缩小。字幕（如果存在）应该包含在图中（即在其背景上和在其边界内），并且如果它会导致图形在宽度上增长，则应该将其分成多行。

我基本上遇到过两种实现这一目标的方法，但我无法真正开始工作。

第一个是在图上设置display: table，在标题上设置display: table-caption，但这似乎会导致浏览器完全脱离图，而不是将其留在里面。

第二个是在图上设置width: min-content; max-width: 100%。如果图形自然小于列宽，这可以正常工作，但我无法让它缩小图像。虽然图形元素本身具有正确的宽度限制，但其中的图像只是溢出。（width: fit-content也会考虑标题的宽度。）图像上的object-fit: scale-down被完全忽略。如果我设置width: 100%和/或max-width: 100%，它会被任意缩小以匹配标题的最小宽度（如果存在），如果没有标题则为0。唯一真正有用的是如果我指定图像的确切宽度，但它会失去响应性。

我已经在网上寻找解决方案，包括SO，但没有找到合适的解决方案。这是一个简化的HTML / CSS来说明我在说什么。

<body>
 <figure>
  <img src="some-image.png" />
  <figcaption>Lorem ipsum dolor sit amet, this might be narrower/wider than the image above or completely omitted.</figcaption>
 </figure>
</body>

CSS：

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  border: 1px solid red;
  width: 300px;
}

figure {
  background: gray;
  display: block;
  border: 1px solid blue;
  width: min-content;
  max-width: 100%;
}

figure img {
  border: 1px solid green;
  object-fit: scale-down; /* Doesn't seem to do anything */
  width: 100%; /* This causes the image to shrink to the caption, or 0 if there is no caption */
  max-width: 100%; /* Same as above */
}

我想我有点理解为什么这种情况正在发生，我不知道如何解决它。任何帮助，将不胜感激。如果JavaScript是绝对必要的，请不要使用除JQuery之外的任何其他框架。

以下两个屏幕截图展示了正确工作和溢出情况：

Answer 1

您的第一种方法可能有用。它将标题放在图框中，但它确实采用了图形宽度。因此，为你的figcaption添加背景和边框可能会成功。并且将图中的边框底部和标题中的边框顶部分开，使其看起来像一个盒子。

figure, figcaption
{
   border:     1px solid blue;
   background: gray;
}

figure
{
   display:             table;
   border-bottom-width: 0;
}

figcaption
{
   display:          table-caption;
   caption-side:     bottom;
   border-top-width: 0;
}

figure img
{
   border:    1px solid green;
   max-width: 100%;
}

请参阅https://jsfiddle.net/xdv02n8e/11/

控制最小宽度父级

1 个答案: