图像未覆盖整个 div答案

【问题标题】：Image is not covering the whole div图像未覆盖整个 div
【发布时间】：2022-02-06 05:53:27
【问题描述】：

我试图让我的图像覆盖整个 div，即父 div 的 50%。我使用了object-fit:cover，但它仍然无法正常工作。问题是当我减小窗口宽度时，图像也会缩短。

在（1）中宽度是满的第二张图片是900px的窗口大小。

* {
  box-sizing: border-box;
}

body {
  background: yellow;
}

section {
  background: red;
  widtth: 100%;
  min-height: 700px;
}

article {
  background: green;
  width: 50%;
  min-height: 700px;
  padding: 100px;
  float: left;
}

picture {
  float: left;
  width: 50%;
  min-height: 700px;
}

img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

section::after {
  content: "";
  clear: both;
  display: block;
}

<body>
  <section class="about">
    <article>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur expedita laudantium, ea eos fugiat dolores laboriosam voluptas illo deleniti pariatur ratione nobis perferendis in consectetur rerum ipsa debitis quis numquam! Lorem ipsum dolor
        sit amet consectetur adipisicing elit. Veniam unde placeat ratione magnam tempore velit accusamus ipsam quaerat aspernatur maiores?</p>
    </article>
    <picture>
      <img src="https://www.loveinartsz.com/wp-content/uploads/2021/03/b04803919effa1914ae6754d8bee30fb.jpg" alt="">
    </picture>
  </section>

</body>

我已经链接了下面的代码笔链接以供参考。

https://codepen.io/YASH_KR18/pen/LYObNrB

【问题讨论】：

我将您的代码（包括拼写错误）作为runnable Stack Snippet 带入问题。请调整演示以重现您的问题。

标签： html css image

【解决方案1】：

简单的解决方案，将display:flex 添加到其父元素picture 即可。

* {
  box-sizing: border-box;
}

body {
  background: yellow;
}

section {
  background: red;
  width: 100%;
  min-height: 700px;
}

article {
  background: green;
  width: 50%;
  min-height: 700px;
  padding: 100px;
  float: left;
}

picture {
  float: left;
  width: 50%;
  min-height: 700px;
   display:flex
}

img {
  max-width: 100%;
  max-height: 100%;
  object-fit: cover;
}

section::after {
  content: "";
  clear: both;
  display: block;
}

<body>
  <section class="about">
    <article>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur expedita laudantium, ea eos fugiat dolores laboriosam voluptas illo deleniti pariatur ratione nobis perferendis in consectetur rerum ipsa debitis quis numquam! Lorem ipsum dolor
        sit amet consectetur adipisicing elit. Veniam unde placeat ratione magnam tempore velit accusamus ipsam quaerat aspernatur maiores?</p>
    </article>
    <picture>
      <img src="https://www.loveinartsz.com/wp-content/uploads/2021/03/b04803919effa1914ae6754d8bee30fb.jpg" alt="">
    </picture>
  </section>

</body>

【讨论】：

【解决方案2】：

因为您为此使用了额外的图片标签我避免使用该标签，因为我认为在整个代码中不需要它。如果要使用的图片标签变化很大，我们必须考虑其他事情。这里看看： HTML

<body>
  <section class="about">
    <article>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur expedita laudantium, ea eos fugiat dolores laboriosam voluptas illo deleniti pariatur ratione nobis perferendis in consectetur rerum ipsa debitis quis numquam! Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam unde placeat ratione magnam tempore velit accusamus ipsam quaerat aspernatur maiores?</p>
    </article>
    
      <img src="https://www.loveinartsz.com/wp-content/uploads/2021/03/b04803919effa1914ae6754d8bee30fb.jpg" alt="">
    
  </section>
  
</body>

CSS

*{
  box-sizing:border-box;
}
body{
  background:yellow;
}

section{
  background:red;
  widtth:100%;
  min-height:700px;
}

article{
  background:green;
  width:50%;
  min-height:700px;
  padding:100px;
  float:left;
}



img{
 float:left;
  width:50%;
  min-height:700px;
}

section::after{
  content:"";
  clear:both;
  display:block;
}

【讨论】：

【解决方案3】：

浮动元素（将它们从 html 结构的正常流程中移除）是很多问题的根源。如果您将 flexbox 或 gridbox 用于父元素，则无需浮动子元素以将它们放置在彼此相邻的位置，然后我相信您的问题已解决。好吧，如果下面的 sn-p 至少可以满足您的要求！如果不是，我可能还不明白你的问题。

/* Colors for visibilty */
body{ background-color: yellow;}
article{ background-color: green; padding: 100px;}
picture{ background-color: red; }

/* The problem fix*/
section 
{
  display: grid;
  grid-template-columns: 50% 50%;
  width: 80%;
  max-width: 1100px;
  min-height: 700px;
  margin: auto;
}

picture img{
  object-position: center;
  object-fit: cover;
  width: 100%;
  height: 100%;
}

<section>
  <article>
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur expedita laudantium, ea eos fugiat dolores laboriosam voluptas illo deleniti pariatur ratione nobis perferendis in consectetur rerum ipsa debitis quis numquam! Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam unde placeat ratione magnam tempore velit accusamus ipsam quaerat aspernatur maiores?</p>
  </article>
  <picture>
     <img src="https://www.loveinartsz.com/wp-content/uploads/2021/03/b04803919effa1914ae6754d8bee30fb.jpg" alt="">
  </picture>
</section>

【讨论】：