Image is not covering the whole div-CodePudding

I am trying to make my image cover the whole div which is 50% of the parent div. I used object-fit:cover but it's still not working. The problem is as I reduce the width of window the image also shortens.

In (1) the width is full The 2nd picture is 900px window size.

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

I have linked the code pen link below for reference.

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

CodePudding user response：

Simple solution, add display:flex to its parent element which is picture will make it work.

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

CodePudding user response：

Because you are using the extra picture tag for that I am avoiding that tag because I see no need of that in this whole code. If you want to use the picture tag vary badly we have to think of something else. Here take a look: HTML

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

CodePudding user response：

Floating elements (removing them from the normal flow of the html structure) is the source of a lot of problems. If you would use a flexbox or gridbox for the parent element then there would be no need to float the children to position them next to eachother and then I believe your problem is solved. Well that is if the snippet below does what you're after at least! If not I might not understand your question yet.

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