How to set image size relative to other element

Question

I got a div containing an unordered list and an image.
Currently, the image is bigger, thus increasing the size of the div.

I want the image to have the same height as the unordered list, like this:

How can I do this using HTML/CSS/js?

    .container {
      display: flex;
    }

    .list {
      list-style-type: none;
    }

   .picture{
      max-width: 100%;
      height: auto;
    }

<div class="container">
    <ul class="list">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
    <div>
        <img src="https://upload.wikimedia.org/wikipedia/commons/e/ee/Sample_abc.jpg" class="picture" />
    </div>
</div>

Example: https://jsfiddle.net/ck26ybg4/

The shape of the second example is different than the first. You'll need to explain the desired behavior better to describe how you want cropping to occur. — isherwood, Feb 12 '21 at 18:18
Thanks for the hint, I provided an example on the bottom of the question — Limon, Feb 12 '21 at 18:49

score 2 · Answer 1 · edited Feb 12 '21 at 19:03

There is another way to get rid of img and add a picture as a background image, for example:

.container {
  width: 50%;
  display: grid;
  grid-auto-flow: column;
  border: 1px solid red;
  margin-bottom: 10px; /* demo only */
}

.list {
  margin: 0;
  padding: 0;
}

.picture{
  border: 1px solid green;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}

<div class="container">
  <ul class="list">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>

  </ul>
  <div class="picture" style="background-image:url(https://via.placeholder.com/728x90.png)"></div>
</div>

<div class="container">
  <ul class="list">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
  </ul>
  <div class="picture" style="background-image:url(https://via.placeholder.com/728x90.png)"></div>
</div>

score 1 · Answer 2 · answered Feb 12 '21 at 19:46

You can just make the picture container relative and add position: absolute to the image, so it won't affect the flow of the document.

.container {
  display: flex;
}

.picture-container {
  position: relative;
}

.picture{
  position: absolute;
  height:100%;
}

<div class="container">
  <ul class="list">
    <li>Point</li>
    <li>Point</li>
    <li>Point</li>
  </ul>
  <div class="picture-container">
    <img class="picture" src="https://dummyimage.com/150/efefef/242424"></img>
  </div>
</div>

score 0 · Answer 3 · edited Feb 12 '21 at 19:01

0

You can use object-fit so the image adapts to the container

The object-fit property defines how an element responds to the height and width of its content box.

For example .picture { object-fit: 'fill' }

edited Feb 12 '21 at 19:01

isherwood

58,414
16
114
157

answered Feb 12 '21 at 18:46

Fran

13
4

How to set image size relative to other element

3 Answers3