获取图像以覆盖 div，同时保持纵横比，而不使用 css 背景图像答案

【问题标题】：Get image to cover div while keeping aspect ratio, without using css background image获取图像以覆盖 div，同时保持纵横比，而不使用 css 背景图像
【发布时间】：2018-07-31 23:47:42
【问题描述】：

我使用 CSS 网格创建了一个网格。对于我的第一个版本，我使用 [background-size:cover;] 将 css 链接的背景图像适合 div。

为了让生活更轻松（但也可能更难），我现在想做同样的事情，但将图像链接到 html 中。我遇到的问题是我可以调整图像的大小以响应宽度或高度。永远不要两者兼而有之。

我需要图像覆盖 div，从中心向外调整大小并保持纵横比。不应显示 div 的蓝色背景色。

如果可能的话，我希望能够在不使用 Javascript 的情况下做到这一点。

我希望这是有道理的。提前致谢。

<html>
  <head>
    <title>home test 3</title>

      <style>

        .wrapper{
          display:grid;
          grid-template-columns:repeat(4, 1fr);
          grid-auto-rows:minmax(250px, auto);
          grid-gap:1em;
          justify-items:stretch;
          align-items:stretch;
          margin-bottom:1em;
        }

        .bannerbox{
          position: relative;
          background-color:blue;
          overflow:hidden;
          position:relative;
          width:100%;
          height:100%;
        }

      .object-fit_cover {
            position: absolute;
            object-fit: cover;
      }

      .box0{
            grid-column:1/5;
          }

          .box1{
            grid-column:1/4;
            grid-row:1/3;
          }


        .bannerbox span {
          position:absolute;
          width:100%;
          height:100%;
          top:0;
          left:0;
        }

        /*responsive code css bart*/
        @media screen and (max-width: 767px){
          .wrapper {
            display:grid;
            grid-template-columns:100%;
            grid-template-columns:repeat(1);
            grid-auto-rows:minmax(1);
            justify-items:stretch;
            align-items:stretch;
          }

          .box1 {
            grid-template-columns:100%;
            grid-column:1;
            grid-row:1;
          }
        }
    </style>
  </head>

    <body>

        <div class="wrapper">
          <div class="bannerbox box1">
            <img class="object-fit_cover" src="https://www.ecktiv.nl/wp-content/uploads/2016/03/Marc-2-900x600.jpg"/>
            <a href="https://www.google.com"><span></span></a>
          </div>

          <div class="bannerbox box2">
            <img class="object-fit_cover" src="https://www.ecktiv.nl/wp-content/uploads/2016/03/Marc-2-900x600.jpg"/>
            <a href="https://www.google.com"><span></span></a>
          </div>

          <div class="bannerbox box3">
            <img class="object-fit_cover" src="https://www.ecktiv.nl/wp-content/uploads/2016/03/Marc-2-900x600.jpg"/>
            <a href="https://www.google.com"><span></span></a>
          </div>
        </div>

    </body>
  </html>

【问题讨论】：

您可以尝试将object-position: 50% 50%; width: 100%; height: 100%; 添加到.object-fit_cover 类吗？
嘿伙计！非常感谢，它有效！
不客气 :)
别忘了接受你认为正确的答案。我们期待您的到来。不要只是问就走开。

标签： html image css responsive css-grid

【解决方案1】：

您必须添加到.object-fit_cover width: 100%; height: 100%;。

img 采用 parent 的宽度和高度，它会尊重纵横比。

.wrapper{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  grid-auto-rows:minmax(250px, auto);
  grid-gap:1em;
  justify-items:stretch;
  align-items:stretch;
  margin-bottom:1em;
}

.bannerbox{
  position: relative;
  background-color:blue;
  overflow:hidden;
  position:relative;
  width:100%;
  height:100%;
}

.object-fit_cover {
    position: absolute;
    object-fit: cover;
    width: 100%;
    height: 100%;

}

.box0{
    grid-column:1/5;
  }

  .box1{
    grid-column:1/4;
    grid-row:1/3;
  }


.bannerbox span {
  position:absolute;
  width:100%;
  height:100%;
  top:0;
  left:0;
}

/*responsive code css bart*/
@media screen and (max-width: 767px){
  .wrapper {
    display:grid;
    grid-template-columns:100%;
    grid-template-columns:repeat(1);
    grid-auto-rows:minmax(1);
    justify-items:stretch;
    align-items:stretch;
  }

  .box1 {
    grid-template-columns:100%;
    grid-column:1;
    grid-row:1;
  }
}

<div class="wrapper">
          <div class="bannerbox box1">
            <img class="object-fit_cover" src="https://www.ecktiv.nl/wp-content/uploads/2016/03/Marc-2-900x600.jpg"/>
            <a href="https://www.google.com"><span></span></a>
          </div>

          <div class="bannerbox box2">
            <img class="object-fit_cover" src="https://www.ecktiv.nl/wp-content/uploads/2016/03/Marc-2-900x600.jpg"/>
            <a href="https://www.google.com"><span></span></a>
          </div>

          <div class="bannerbox box3">
            <img class="object-fit_cover" src="https://www.ecktiv.nl/wp-content/uploads/2016/03/Marc-2-900x600.jpg"/>
            <a href="https://www.google.com"><span></span></a>
          </div>
</div>

jQuery 焦点

用于“响应式裁剪”的 jQuery 插件。动态裁剪图像以填充可用空间，而不会切掉图像的主题。非常适合全屏图像。

在这里您可以打开 GitHub 页面并阅读文档。

https://github.com/jonom/jquery-focuspoint

这里还有一个游乐场工具，您可以在其中放置图像并专注于它以查看它的外观。

https://jonom.github.io/jquery-focuspoint/demos/helper/index.html

【讨论】：

【解决方案2】：

将此添加到.object-fit_cover 类：

object-position: 50% 50%; 
width: 100%; 
height: 100%;

这会调整图像的大小以适合其容器，然后 object fit 将负责图像填充，并且 object position 将使图像在其 img 容器中居中。

【讨论】：