html - 图像未拉伸(stretch)到 div 的全尺寸

Question

我正在尝试使用 object-fit CSS 属性将图像拉伸(stretch)到其 div(左列)的完整大小，但它似乎不起作用。请看这个https://codepen.io/bradscanvas/pen/XWWNqWp?editors=1000

* {
  box-sizing: border-box;
}

  .form-wrapper {
    border
  }  
.row {
  display: flex;
  border: 1px solid grey;
  align-items: center;
  }
  
.column {
  text-align: center;

}
  img {
    max-width:100%;
    max-height:100%;
    object-fit: cover;
  }
  
 .left {
  width: 40%;
  object-fit: contain;
}

.right {
  width: 60%;
  padding: 20px;
}
  @media screen and (max-width: 600px) {
  .left {
    display: none;
  }
    .right {
      width: 100%;
    }
}

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="form-wrapper">
<div class="row">
  <div class="column left">
<img src="https://cdn.shopify.com/s/files/1/0196/2898/2334/files/MU6.jpg?2930">
  </div>
  <div class="column right">
    <i class="fa fa-unlock fa-2x" aria-hidden="true"></i>
    <h2> You're In </h2>
    <p> You deserve it. Unlock your welcome discount and be the first to know about leaked artwork & exclusive offers. </p>
    <h2> GET $20 NOW </h2>
<form class="omnisend-subscribe-form" style="padding-left: 5%; padding-right: 5%"><input type="text" class="omnisend-subscribe-input-email" placeholder="Email address" style="width: 100%; height: 50px; display: block; color: #a0a0a0; font-size: 16px; padding: 6px; border: 1px solid #cfcfcf; margin-bottom: 5px; outline-width: 0px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;" /> <input type="submit" value="I want my $20 off" style="width: 100%; height: 50px; display: block; color: #ffffff; font-size: 16px; padding: 8px; margin-top: 18px; background-color: #f47268; border-width: 0px; -webkit-border-radius: 0px; -moz-border-radius: 3px; border-radius: 0px; outline-width: 0px; cursor: pointer;" /></form>
    </div>
  </div>
 </div>

无结果

Answer 1

.left {
  width: 100%;
  object-fit: contain;
}

不确定这是否是您要找的？背景图像是否应该拉伸(stretch)整个屏幕宽度？