如何将 div 紧紧包裹在图像周围，但如果分辨率大于内容区域，还要调整图像大小以适合内容区域？

Question

我正在尝试构建具有特定要求的图像查看器。它们如下：

• 内容区域是一个网格区域。

• 如果图像大于内容区域，则应在不拉伸图像的情况下将其包含在内。

• 如果图像小于内容区域，则它应该在内容区域内居中。

• 必须有一个 div 始终紧紧包裹图像。

我在下面做了一个快速草图，说明了肖像（顶行）和风景（底行）所需的行为。如果图像的分辨率高于内容区域，则左列中的图像是所需的行为。

色标：

• 白框：内容区域。

• 红框：图像。

• 蓝色边框：图像环绕 div。

到目前为止，我的主要方法是将环绕的 div 绝对定位在图像周围，这可以正常工作，直到我尝试调整大小以适应行为。通常这会破坏紧密包裹的 div。

我也可以使用 Javascript，但因为这是在此基础上构建更多内容的基础，所以我宁愿尝试将其保留为 HTML 和 CSS。

Answer 1

您应该确保您的 div 只是假定内容的大小，img在这种情况下。所以不要使用绝对值。您提到使用grid，因此下面的示例将生成一个网格，其主要部分由20px填充包裹。然后只需使用maximg 上的值来确保它确实超出了网格框的大小。然后在网格框内居中：const width = document.querySelector( '[name=width]' );const height = document.querySelector( '[name=height]' );const image = document.querySelector( 'img' );function onchange(){&nbsp;&nbsp;&nbsp; image.src = `http://placehold.it/${width.value}x${height.value}`;&nbsp; image.style = '';&nbsp;&nbsp;}width.addEventListener( 'change', onchange );height.addEventListener( 'change', onchange );window.addEventListener( 'DOMContentLoaded', () => setTimeout( onchange, 100 ) );body, html { height: 100%; }body { padding: 0; margin: 0; }main {&nbsp; display: grid;&nbsp; grid-template: "left top right" 20px "left main right" 1fr "left bottom right" 20px / 20px 1fr 20px;&nbsp; height: 100%;}main div {&nbsp; grid-area: main;&nbsp; border: 1px solid red;&nbsp; display: inline;&nbsp; align-self: center;&nbsp; justify-self: center;}main div img {&nbsp; max-width: 100%;&nbsp; max-height: 100%;&nbsp; display: block;}#inputs {&nbsp; position: absolute;&nbsp; top: 0;&nbsp; left: 0;&nbsp; transform: translateY(-100%);&nbsp; transition: transform .4s;&nbsp; width: 100%;&nbsp; padding: 10px;&nbsp; background: black;&nbsp; color: white;}body:hover #inputs {&nbsp; transform: translateY(0);}<main>&nbsp; <div>&nbsp; &nbsp; <img />&nbsp; </div></main><div id="inputs">&nbsp; <label>Width: <input name="width" value="200" type="number" /></label>&nbsp; <label>Height: <input name="height" value="200" type="number" /></label></div>我已经包含了一些 javascript 以便您可以测试不同大小的图像。我添加了img.style = ''一个在添加新图像后触发 CSS 重新计算，否则加载时其大小将不正确。