Question

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

为了让生活更轻松（但也许更难）我现在想做同样的事情，但是在html中链接了图像。我遇到的问题是我可以在图像中调整图像大小。宽度或高度。从来没有。

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

如果可能，我希望能够在不使用Javascript的情况下执行此操作。

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

＆＃13;

<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>

＆＃13;

Answer 1

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

img 取宽度和父级的高度，它将尊重宽高比。

＆＃13;

.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;
  }
}

＆＃13;

<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>

＆＃13;

jQuery FocusPoint

用于响应裁剪的jQuery插件＆＃39;动态裁剪图像以填充可用空间而不会剪切图像的主题。非常适合全屏图像。

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

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

这里还有游乐场工具，您可以在其中放置图像并对其进行聚焦以查看其外观。

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

Answer 2

将其添加到.object-fit_cover类：

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

这会调整图像大小以适合其容器，然后对象适合将处理图像填充，对象位置将图像置于其img容器中。

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

2 个答案:

jQuery FocusPoint