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

Question

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

• 内容区域是一个网格区域。
• 如果图像大于内容区域，则应在不拉伸图像的情况下将其包含在内。
• 如果图像小于内容区域，则应在内容区域内居中。
• 必须有一个始终紧紧包裹图像的 div。

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

色标：

• 白框：内容区。
• 红框：图片。
• 蓝色边框：图像环绕 div。

到目前为止，我的主要方法是绝对 position 围绕图像的包装 div，在我尝试调整大小以适应行为之前，它工作正常。通常这会破坏紧密包装的 div。

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

Answer 1

您应该确保您的 div 只是假设内容的大小，在这种情况下为img 。 所以不要用绝对的。 您提到使用grid ，所以下面的示例将生成一个网格，其主要部分由20px填充包裹。 然后只需使用 img 上的max来确保它确实超过了网格框的大小。 然后在网格框内居中：

 const width = document.querySelector( '[name=width]' ); const height = document.querySelector( '[name=height]' ); const image = document.querySelector( 'img' ); function onchange(){ image.src = `http://placehold.it/${width.value}x${height.value}`; image.style = ''; } width.addEventListener( 'change', onchange ); height.addEventListener( 'change', onchange ); window.addEventListener( 'DOMContentLoaded', () => setTimeout( onchange, 100 ) );

 body, html { height: 100%; } body { padding: 0; margin: 0; } main { display: grid; grid-template: "left top right" 20px "left main right" 1fr "left bottom right" 20px / 20px 1fr 20px; height: 100%; } main div { grid-area: main; border: 1px solid red; display: inline; align-self: center; justify-self: center; } main div img { max-width: 100%; max-height: 100%; display: block; } #inputs { position: absolute; top: 0; left: 0; transform: translateY(-100%); transition: transform.4s; width: 100%; padding: 10px; background: black; color: white; } body:hover #inputs { transform: translateY(0); }

 <main> <div> <img /> </div> </main> <div id="inputs"> <label>Width: <input name="width" value="200" type="number" /></label> <label>Height: <input name="height" value="200" type="number" /></label> </div>

我已经包含了一些 javascript，因此您可以测试不同大小的图像。 我添加了一个img.style = ''以在添加新图像后触发 CSS 重新计算，否则它的大小在加载时会不正确。