Image container taking more space than it should

user_12048403 0
Viewed 321

How can I remove the empty space from the image container (blue)? I need it to be compatible with ie11.

I don't want to hardcode the width/height of the container because images can be different aspect ratios and sizes.

main {
    width: 100%;
    height: 100%;
}

.video {
    width: 100%;
    display: flex;
    max-height: 5em;
    border: 1px solid red;
}

.video .image {
    background: blue;
    max-height: 100%;
    max-width: 100%;
}
.video .image img {
    max-width: 20vw;
    max-height: 100%;
}
<main>
    <div class="video">
        <div class="image">
            <img src="https://placehold.it/300/200">
        </div>
        <div class="content">
            <p>title</p>
            <p>description</p>
        </div>
    </div>
</main>

internet-explorer-11 css html
1 Answers

I find a strange thing: If we download the image and load it from the same server as the test page like this <img src="picture/200.png">, the following CSS code works well in IE:

main {
    width: 100%;
    height: 100%;
}

.video {
    width: 100%;
    display: flex;
    height: 5em;
    border: 1px solid red;
}

.video .image {
    height: 100%;
}

.video .image img {
    height: 100%;
}

I serve the image and the test page through localhost, you can see the result: enter image description here

If you still want to use the online link as image source, you can try the following code without flexbox which can work well in IE:

main {
  width: 100%;
  height: 100%;
}

.video {
  width: 100%;
  height: 5em;
  border: 1px solid red;
}

.video img {
  overflow: hidden;
  height: 100%;
  float: left;
}
<main>
  <div class="video">
    <img src="https://placehold.it/300/200">
    <div class="content">
      <p>title</p>
      <p>description</p>
    </div>
  </div>
</main>

user_114903470
Related