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

Question

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

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

我在下面画了一个草图，说明了肖像(顶行)和风景(底行)所需的行为。左列的图像是图像分辨率高于内容区域时所需的行为。

颜色代码:

• 白框:内容区域。
• 红框:图片。
• 蓝色边框:图片包装 div.

到目前为止，我的主要方法是将环绕 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 重新计算，否则它的大小在加载时会不正确。