Question 220829 in Html Question posted in
Some basic documentation can be found here.

Html – Image in Div will not fill the whole div

I cant seem to be able to get the image of the person on the right side of the website to filll the remaining space, its a css issue but cant work it out.

Then obviosuly I need the whole thing to be able to be responsive, whicb it is, but this image also, in that it fills the space it has.

<div class="wp-block-column is-layout-flow">
<figure class="wp-block-image size-full"><img decoding="async" src="https://www.accend4web.co.uk/morgiou/wp-content/uploads/2023/07/home-person-test-1.jpg" alt="" class="wp-image-69" srcset="https://www.accend4web.co.uk/morgiou/wp-content/uploads/2023/07/home-person-test-1.jpg 1000w, https://www.accend4web.co.uk/morgiou/wp-content/uploads/2023/07/home-person-test-1-300x150.jpg 300w, https://www.accend4web.co.uk/morgiou/wp-content/uploads/2023/07/home-person-test-1-768x384.jpg 768w" sizes="(max-width: 1000px) 100vw, 1000px" width="1000" height="500"></figure>
</div>

@media (min-width: 782px)
.wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column {
flex-basis: 0;
flex-grow: 1;
}

.entry-content .wp-block-image img {
max-width: 100%;
height: auto;
width: 100%;
object-fit: cover;
}

Home Page

Tags:

2

Answers


  1. 0

    I visited the site and tried some solutions. The problem is your div’s resolution is 632×996 while that of your image is 632×316.

    Because your div’s height is larger than your image’s, it’s not possible to fit the image entirely preserving it. You could try the following:

    .image-container{
    position: relative;
    overflow: hidden;
}

.image-container img{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    min-height: 100%;
    z-index: 1;
}

    This will cut the image a bit but I think you could adjust the resolution of your image accordingly.

    Login or Signup to reply.
  2. 0

    Change height of the image and its container to 100%. object-fit fills up the space correctly then.

    .wp-block-image {
  margin: 0 0 1em;
  height: 100%;
}
.entry-content .wp-block-image img {
  max-width: 100%;
  height: 100%;
  width: 100%;
  object-fit: cover;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search