How to force container of image to keep its fixed height and width

Question

I am giving the <div /> that is containing an <img /> a fixed width and height. However, the ´` is not square, but a rectangle. Why is that?

.placeholder-wrapper {
  display: flex;
  flex-direction: row;
  column-gap: 5px;
  width: 100%;
  justify-content: flex-end;
}

.another-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: end;

  flex: 1;
}

.container {
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 100px;
}

.image-wrapper {
  width: 100px;
  height: 100px;
  background-color: hotpink;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 10px;
}

.outter-wrapper {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-content: flex-start;
  justify-content: space-between;
}

.placeholder {
  background-color: hotpink;
  width: 20px;
  height: 20px
}

p, h5 {
  margin: 0
  }

<div class="container">
  <div class="image-wrapper">
    <img src="https://dummyimage.com/60x60/" />
  </div>
  <div class="outter-wrapper">
    <div>
      <h5> Some Text </h6>
        <p> More Text </p>
    </div>
    <div class="another-wrapper">
      <h5> Some Text </h6>
        <p> More Text </p>
    </div>
    <div class="placeholder-wrapper">
      <span class="placeholder" />
      <span class="placeholder" />
      <span class="placeholder" />
    </div>
  </div>
</div>

score 0 · Accepted Answer · answered Apr 21 '23 at 06:26

add flex-shrink: 0; to your .image-wrapper to prevent it from shriking below the given width.

.image-wrapper {
      width: 100px;
      height: 100px;
      background-color: hotpink;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 10px;
      flex-shrink: 0;
}

How to force container of image to keep its fixed height and width

1 Answers1