Image next to header text respect parent size-CodePudding

Im trying to add an image/logo next to my header text, and make sure the image keeps it aspect ratio, and respects the size of the container, which is as high as its containing text. But the image keep overflowing, or using its real dimensions. How can I get the image next to the text, both text and image horizontally centered. The parent div can not have a height set, as it should respect the size of the text. I tried using table instead, I tried using a before: pseudo element, but nothing works. This is what i got at the moment and its so wrong

.batman {
  font-size: 20px;
  font-weight: bold;
  display: inline-block;
  width: 100%;
}

.batman img {
  min-width: 100%;
  min-height: 100%;
}

<div >
  <img src="https://i.imgur.com/JSWi9SB.png" /> title goes here
</div>

jsfiddle: https://jsfiddle.net/sxd91gqc/

CodePudding user response：

Since it's one line of text, define a height equal to the line-height:

.batman {
  font-size: 20px;
  font-weight: bold;
  display: inline-block;
  line-height: 1.2em;
  border: 1px solid red;
}

.batman img {
  height: 1.2em;
  vertical-align: middle;
}

<div >
  <img src="https://i.imgur.com/JSWi9SB.png" /> title goes here
</div>