html - 在不使用 css 背景图像的情况下，在保持宽高比的同时获取图像以覆盖 div-6ren

html - 在不使用 css 背景图像的情况下，在保持宽高比的同时获取图像以覆盖 div

转载作者：太空宇宙更新时间：2023-11-04 07:36:34

24

4

我使用 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-fit_cover width: 100%;高度: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

这里还有 playground 工具，您可以在其中放置图像并聚焦它以查看它的外观。

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

关于html - 在不使用 css 背景图像的情况下，在保持宽高比的同时获取图像以覆盖 div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48905187/

24

4

0

文章推荐： c - 调试多线程程序

文章推荐： python - 如何在 Mac OS X 中为 python3 安装密码学？

java - 在具有多个条件的 If 情况下，我们能否获得条件失败的确切位置？
我是 Java 新手，这是我的代码， if( a.name == b.name && a.displayname == b.displayname && a.linknam
javascript - 在下面的 JavaScript 情况下，如何避免重复自己的情况？
在下面的场景中，我有一个 bool 值。根据结果，我调用完全相同的函数，唯一的区别是参数的数量。 var myBoolean = ... if (myBoolean) { retrieve
c++ - 异常(exception)情况下，我想在没有任何堆栈展开的情况下进行调试
我是一名研究 C++ 的 C 开发人员: 我是否正确理解如果我抛出异常然后堆栈将展开直到找到第一个异常处理程序？是否可以在不展开的情况下在任何 throw 上打开调试器(即不离开声明它的范围或任何更高
c++ - 在什么情况/情况下 dynamic_cast<> 会失败？
在修复庞大代码库中的错误时，我观察到一个奇怪的情况，其中引用的动态类型从原始 Derived 类型更改为 Base 类型!我提供了最少的代码来解释问题: struct Base { // some
c# for 循环在 switch/case 情况下 - 如何？
我正在尝试用 C# 扩展给定的代码，但由于缺乏编程经验，我有点陷入困境。使用 Visual Studio 社区，我尝试通过控制台读出 CPU 核心温度。该代码使用开关/外壳来查找传感器的特定名称(即
javascript - 在 AJAX 情况下，如何在目标页面评估 JavaScript？
这可能是一个哲学问题。假设您正在向页面发出 AJAX 请求(这是使用 Prototype): new Ajax.Request('target.asp', { method:"post", pa
html - 在 Usemap/area 情况下，光标未更改为指针
我有以下 HTML 代码，我无法在所有浏览器中正常工作: 我试图在移动到
swift - 在这种 Firebase 情况下，如何在函数之间传递数据？ swift + Xcode
我对 Swift 很陌生。我如何从 addPin 函数中检索注释并能够在我的 addLocation 操作 (buttonPressed) 中使用它。我正在尝试使用压力触摸在 map 上添加图钉，在两
ios - 在 iPad DetailView 情况下，viewDidUnload 未被调用
我设置了一个详细 View ，我是否有几个 Nib 文件根据在 Root View Controller 的表中选择的项目来加载。我发现，对于 Nibs 的类，永远不会调用 viewDidUnloa
javascript - 在这种 javascript 情况下，除了 eval 之外还有其他选择吗？
我需要动态访问 json 文件并使用以下代码。在本例中，“bpicsel”和“temp”是变量。最终结果类似于“data[0].extit1” var title="data["+bpicsel+"]
c# - 在 HTTPS 情况下，服务器证书未使用 HTTP.SYS 正确配置
我需要使用第三方 WCF 服务。我已经在我的证书存储中配置了所需的证书，但是在调用 WCF 服务时出现以下异常。向 https://XXXX.com/AHSharedServices/Custome
postgresql - 即使在 ON CONFLICT DO NOTHING 情况下，postgres INSERT 触发器也会触发
在几个 SO 答案(1、2)中，建议如果存在冲突则不应触发 INSERT 触发器，ON CONFLICT DO NOTHING 在触发语句中。也许我理解错了，但在我的实验中似乎并非如此。这是我的 S
java - 在 Hibernate3 中的 saveOrUpdateAll 情况下，具有相同标识符值的不同对象已与 session 关联
如果进行修改，则会给出org.hibernate.NonUniqueObjectException。在我的 BidderBO 类(class)中 @Override @Transactional(pr
javascript - 为什么 React App 的 redux 情况下 IndexOf(Object) 可以工作？
我使用 indexOf() 方法来精细地查找数组中的对象。直到此刻我查了一些资料，发现代码应该无法正常工作。我在reducer中尝试了上面的代码，它成功了 let tmp = state.find
mysql - 在指定了 ORDER BY 和 LIMIT 并且实际上只需要连接少量行的 JOIN 情况下，MySQL 的行为如何？
假设我有以下表格: CREATE TABLE Game ( GameID INT UNSIGNED NOT NULL, GameType TINYINT UNSIGNED NOT NU
ios - 在使用 swift ios 的某些 URL 情况下，Alamofire 进度状态显示 0.0
代码: Alamofire.request(URL(string: imageUrl)!).downloadProgress(closure: { (progress) in

首页

博学

6Ren·AI

商城

html - 在不使用 css 背景图像的情况下，在保持宽高比的同时获取图像以覆盖 div

jQuery 焦点