Image is not covering the whole div

user_16697942 0
Viewed 58

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.

  1. enter image description here
  2. enter image description here

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

I have linked the code pen link below for reference.

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

css image html
3 Answers

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

user_177436470

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

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>

user_179070840
Related