如何防止框架div拉伸网格的整个宽度

Question

当我如下创建带有包装器div的图像时，网格：

<div class="grid">
  <div class="wrapper">
    <img src="https://images.unsplash.com/photo-1482003297000-b7663a1673f1?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ">
  </div>
</div>

.grid {  
  display: grid;
  height: 50vh;
}

.wrapper {
  display:inline-block;
  min-height: 0;
  max-width: 100%;
  max-height: 100%;
  border: 1px solid black;
}

img {
  object-fit: contain;
  max-width: 100%;
  max-height: 100%;
}

包装div将拉伸网格的宽度。我尝试将grid-template-columns设置为min-content，但这将图像压缩为零。

是否有一种方法可以使它像没有网格时一样工作？即。环绕图像？该示例保存在[Codepen上的here

注意。网格的高度设置为50vh。图像需要缩小到此尺寸，同时保持其长宽比。

Answer 1

同样设置图像的最大高度时，图像也会受到挤压，将其替换为height: auto，然后像下面一样重置网格模板列。

.grid {  
  display: grid;
  /* the 100px is completely arbitrary and can be replaced with whatever value */
  grid-template-columns: minmax(100px, max-content);
}

.wrapper {
  display:inline-block;
  min-height: 0;
  max-width: 100%;
  max-height: 100%;
  border: 1px solid black;
}

img {
  height: auto;
  object-fit: contain;
  max-width: 100%;
}

<div class="grid">
  <div class="wrapper">
    <img src="https://images.unsplash.com/photo-1482003297000-b7663a1673f1?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ">
  </div>
</div>