在不知道容器中内容大小的情况下仅使用 HTML 和 CSS 限制容器的宽度 [重复]-解网

问：

4天前关闭。

main {
  display: inline-block;
}
img {
  display: block;
  max-width: 100%;
  max-height: 100vh;
}
.flex {
  display: flex;
  justify-content: space-between;
}
#details {
  flex-wrap: wrap;
}
#details span {
  margin: 5px;
}

<main>
  <h1>My Sweet Photo</h1>
  <img src="https://picsum.photos/400/500" />
  <div id="setting" class="flex">
    <p class="comment">Ramin Beach, had a great time.</p>
    <p class="date">January 3, 2022</p>
  </div>
  <div id="details" class="flex">
    <span>f/11</span>
    <span>1/1000 s</span>
    <span>55 mm</span>
    <span>Nikon D5200</span>
    <span>AF-S DX VR Nikkor 18-55mm f/3.5-5.6G II</span>
    <span>ISO 200</span>
  </div>
</main>

我正在建立一个个人的、类似 Instagram 的相册网站。我想展示不同类型的图片，但至关重要的是，它们有各种尺寸：风景、肖像或介于两者之间。理想情况下，我希望内容围绕图片流动，并在图像下方添加描述和信息的小“标签”（例如用于拍摄照片的相机、日期、焦距、曝光时间等）。

此外，我正在尝试尽可能少地使用JavaScript。理想情况下，纯 HTML 和 CSS 解决方案。我有一个相当不错的工作布局 - 除了在非常大的屏幕上。在非常大的屏幕上，容器会“推动”容器的宽度，这是我不想做的。我想将整个布局的最大宽度保持为图像的自然宽度。同时，我希望图像保持其纵横比并始终渲染，以便它占据 100% 的视口（因此下图的特定 CSS 规则）。#details<main>

在较小宽度的屏幕上，我下面的代码效果很好，因为图像的宽度会自然缩小。在较大的屏幕上，或者当图像处于纵向（高度大于宽度）时，详细信息容器开始占用越来越多的屏幕宽度，并且图像与图像下方的文本之间的布局变得未对齐。

我之前用 JavaScript 解决了这个问题：当页面完成加载时，我将元素的最大宽度设置为图像加载后的计算宽度。<main>

问题是：有没有办法只用 HTML 和 CSS 来做到这一点？

HTML CSS 弹性框

我已经编辑了您的问题，以便您的代码现在是可以直接从您的问题运行的代码片段，并且我更改了您的示例图像链接以显示真实的占位符图像。请查看我所做的工作，以确保它正确显示您想要的内容。如果需要，您还可以更改图像链接末尾的数字，以显示不同大小的图像。

1赞 fil maj 11/15/2023

哦，废话，我想我在你做的同时做了完全相同的事情！

0赞 Chris Barr 11/15/2023

哈，没问题 - 相同的编辑！因此，当我全屏查看时，它似乎工作正常。图像永远不会变得比它应该大，当我调整窗口大小时，它会缩小。我错过了什么吗？

0赞 fil maj 11/15/2023

图像大小调整与我上面的代码一样工作得很好。我的问题是，包含所有额外信息的 div 似乎将容器的宽度“推”得更高。理想情况下，我希望文本与图像的边缘对齐：文本不应宽于图像的宽度，但我不知道如何在没有 JavaScript 🤔 的情况下实现这一点#details<main>

1赞 r3n4y 11/15/2023

媒体查询将给出参差不齐的响应。

答：

0赞 r3n4y 11/15/2023 #1

main {
  display: inline-block;
}
#container {
  width: min-content;
}
#just-image{
  min-width:200px;
}
img {
  display: block;
  max-width: 100%;
  max-height: 100vh;
}
.flex {
  display: flex;
  justify-content: space-between;
}
#details {
  flex-wrap: wrap;
  width: 100%;
}
#details span {
  margin: 5px;
}

<main>
<div id="container">
  <h1>My Sweet Photo</h1>
  <div id="just-image">
     <img src="https://picsum.photos/200/300" />
  </div>
  <div id="setting" class="flex">
    <p class="comment">Ramin Beach, had a great time.</p>
    <p class="date">January 3, 2022</p>
  </div>
  <div id="details">
    <span>f/11</span>
    <span>1/1000 s</span>
    <span>55 mm</span>
    <span>Nikon D5200</span>
    <span>AF-S DX VR Nikkor 18-55mm f/3.5-5.6G II</span>
    <span>ISO 200</span>
  </div>
</div>
</main>

我就是这样做的。在调用的 .这个 div 将有一个 .原因是我仍然需要一种方法来了解网站在我允许的最小宽度下的行为方式，以便我可以为此进行计划。之后，在所有内容周围添加一个更大的 div。我为这些 div 添加了 css。因此，这将按如下方式工作：div 具有，因此它将遵循的宽度。 div 具有，因此它将具有最小元素的宽度，在本例中为 div。因此，对于大于 200px 的图像，它将按照的宽度进行拉伸。如果您计划使用小于 200px 的图像，则可以更改的 .<img>#just-imagemin-widthmin-width<div id="container"#detailswidth:100%#container#containerwidth:min-content#just-image#just-imagemin-width:200px<img>min-width#just-image

但为了拥有更可预测的行为，我建议你有一些限制。因此，您会看到，如果图像宽度低于 200px，代码就会中断，但这是设计使然。您可以允许宽度小于 200px，但您会看到 div 中的文本会开始看起来越小。所以最好有限制。details

这非常接近我想要的！但我在测试中发现了一个问题：图像高度缩小到我理想的期望高度以下。我总是希望图像占据视口的整个高度。由于这些图片来自数码单反相机，因此它们的大小为数百万像素，因此我可以期望自然高度至少为 3000 像素，因此我认为大多数（如果不是全部）屏幕应该能够以 .如果我设置和，我会失去纵横比。设置似乎也不起作用。100vh100vhheight: 100vhwidth: autoaspect-ratio: auto

0赞 r3n4y 11/15/2023

所以你希望图像是max-height100vh

0赞 fil maj 11/15/2023

正确，它已设置为。似乎设置 to 的宽度会向下挤压图像，使其高度小于。我尝试在图像上设置，但这随后会更改纵横比。#containermin-content100vhheight: 100vh

上一个：如何将导航栏置于此位置 [关闭]

下一个：在弹性框容器中将徽标左对齐居中，将文本对齐右对齐

在不知道容器中内容大小的情况下仅使用 HTML 和 CSS 限制容器的宽度 [重复]

Limiting width of a container without knowing size of content within it with only HTML and CSS [duplicate]

评论

评论