如何在不拉伸的情况下将图像放入css-grid答案

【问题标题】：How to fit a image into css-grid without stretching如何在不拉伸的情况下将图像放入css-grid
【发布时间】：2020-01-06 22:59:53
【问题描述】：

问题： IMG 正在拉伸 css-grid，我希望图像按比例缩小并适合网格。

试过了： 我尝试在图像上设置最大高度/宽度，但它只会减少图像的拉伸。

.grid-container {
display:grid;
grid-template-areas:
"nav_bar"
"main"
"about"
"port_over"
"resu_proj"
"links";
background-color: #161616;
grid-row-gap: 5em;
}

/*Nav bar grid*/
.nav_bar {
    display: grid;
    grid-area: nav_bar;
    grid-template-areas: "nav_img nav_links nav_links nav_links";
}

/*Nav bar img*/
.nav_img {
    grid-area: nav_img;
    object-fit: cover;

    background-color: grey;
}

<div class="grid-container">
     <div class="nav_bar">

     <img src="./MLW_IMAGES/M.L.W logo.png" class="nav_img">


     <div class="nav_links">
          <nav>
             <a href="/index.html#about">About</a>
             <a href="/index.html#portfolio">Portfolio</a>
             <a href="/index.html#contact">Contact</a>
          </nav>
     </div>
     </div>
...
</div>

【问题讨论】：

您需要显示整个图像吗？尺寸更小而不拉伸？
您是否尝试将宽度、高度设置为自动？
包括图片，这样我们就可以看到问题了。
@XxSTREKxX 我需要显示整个图像，但将其缩小到网格框中。
@WaqasAmjad 我尝试将宽度/高度设置为自动，图像恢复为原始大小。

标签： html css css-grid

【解决方案1】：

只为图像上一节课。为图像类提供特定的高度和宽度，并为图像提供以下 css。

.class-name img {
  max-height: 100%;
  min-height: 100%;
  min-width: 100%;
  max-width: 100%;
  object-fit: cover;
}

【讨论】：

我把max/min-height/width的代码复制到了class里面，图片没有受到影响。

【解决方案2】：

在响应式上下文中：

img {
  width: 100%;
  height: auto;
}

/* grid */

.grid-element img {
  min-height: 100%;
  min-width: 100%;
  object-fit: cover;
}

【讨论】：

【解决方案3】：

如果图像尺寸较大，您可以尝试设置 max-height 和 max-width 并指定您希望图像采用的宽度。这是你所期待的吗？

.grid-container {
display:grid;
grid-template-areas:
"nav_bar"
"main"
"about"
"port_over"
"resu_proj"
"links";
grid-row-gap: 5em;
}

/*Nav bar grid*/
.nav_bar {
    display: grid;
    grid-area: nav_bar;
    grid-template-areas: "nav_img nav_links nav_links nav_links";
}

/*Nav bar img*/
.nav_img {
    grid-area: nav_img;
    object-fit: cover;

    background-color: grey;
}
img
{
max-height:100px;
max-width:100px;
}

<div class="grid-container">
     <div class="nav_bar">

     <img src="https://dummyimage.com/50x50/000/fff" class="nav_img">


     <div class="nav_links">
          <nav>
             <a href="/index.html#about">About</a>
             <a href="/index.html#portfolio">Portfolio</a>
             <a href="/index.html#contact">Contact</a>
          </nav>
     </div>
     </div>
...
</div>

【讨论】：