代码之家 › 专栏 › 技术社区 › Bart

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

css-grid responsive css image html

Bart · 技术社区 · 7 年前

我使用CSS网格创建了一个网格。在我的第一个版本中,我使用了[背景尺寸:封面;]将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>

2 回复 | 直到 7 年前

Adel Elkhodary 7 年前

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

那个 img公司 取宽度和高度 父母亲 它将尊重纵横比。

.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

Taha Paksu 7 年前

将此添加到 .object-fit_cover 类别:

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

这会调整图像的大小以适合其容器,然后对象匹配将负责图像填充,对象位置将使图像在其img容器中居中。