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

How to force image to take all available height given by container – Html

I have an two <image />s and a <p/>, each wrapped in a <span /> which are again childs of a <div />. Both images have different dimensions. I need them to always take half of the available width (which works) and then scale them up to 100% of the available height. The latter does not work.

.container {
    display: flex;
    flex-direction: row;
    width: 100%;
    column-gap: 10px;
    margin-top: 10px;
    margin-bottom: 10px;
}

.image-caption-wrapper {
    width: 50%;
    height: 100%;
}

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

p {
  margin: 0;
}
<div>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
  <div class="container">
    <span class="image-caption-wrapper">
      <img class="image" src="https://dummyimage.com/800x200/000/fff"/>
      <p>Some Image Caption</p>
    </span>
    <span class="image-caption-wrapper">
      <img class="image" src="https://dummyimage.com/600x400/000/fff"/>
      <p>Some Other Image Caption</p>
    </span>
  </div>
  <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
</div>

Why is the 800 x 200 image not taking all the available height, eventhough the height of it is set to 100%?

Tags:

2

Answers


  1. 0

    Hello there,

    • I understand your problem "Why is the 800 x 200 image not taking all the available height, eventhough the height of it is set to 100%?". So let me explain how you can rectify that problem.
    .container {
    display: flex;
    flex-direction: row;
    width: 100%;
    column-gap: 10px;
    margin-top: 10px;
    margin-bottom: 10px;
}

.image-caption-wrapper {
    width: 50%;
    height: 100%;
}
    • Your code consists of flex layout, but if you want to span the both image elements as you said then you need to use grid layout
    .container {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 50px 0;
}

.image-caption-wrapper {
  width: 100%;
  height: 100%;
}
    • The above code helps us to efficiently place the images as you said and we removed the width: 100%, because div is a block level element so it automatically occupies 100% of width by default.
    • And we used margin of 50px for both top and bottom along with changing the width of .image-caption-wrapper to 100% so that our both images will occupy entire space

    I hope you find this feedback helpful !

    Login or Signup to reply.
  2. 0

    you need to give height to main block (.container) , because children blocks
    cant understand what 100% they need to fill .

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search