JSFiddle - React, Tailwind, and code Playground

HTML

<div class="outer-container" style="background: #000000">
  <div class="inner-container" contenteditable="true" style="background: #FF0000; border: 1px solid transparent;">
  <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASwAAAEsCAQAAADTdEb+AAACIklEQVR42u3SMQ0AAAgEMd6/MUQxYIKEpZVwufQUnIuxMBbGwlhgLIyFscBYGAtjgbEwFsYCY2EsjAXGwlgYC4yFsTAWGAtjYSwwFsbCWGAsjIWxwFgYC2OBsTAWxgJjYSyMBcbCWBgLjIWxMBYYC2NhLDAWxsJYYCyMhbHAWBgLY4GxMBbGAmNhLIwFxsJYGAuMhbEwFhgLY2EsMBbGwlhgLIyFscBYGAtjgbEwFsYCY2EsjIWxRMBYGAtjgbEwFsYCY2EsjAXGwlgYC4yFsTAWGAtjYSwwFsbCWGAsjIWxwFgYC2OBsTAWxgJjYSyMBcbCWBgLjIWxMBYYC2NhLDAWxsJYYCyMhbHAWBgLY4GxMBbGAmNhLIwFxsJYGAuMhbEwFhgLY2EsMBbGwlhgLIyFscBYGAtjgbEwFsYCY2EsjAXGwlgYC2MZC2NhLIwFxsJYGAuMhbEwFhgLY2EsMBbGwlhgLIyFscBYGAtjgbEwFsYCY2EsjAXGwlgYC4yFsTAWGAtjYSwwFsbCWGAsjIWxwFgYC2OBsTAWxgJjYSyMBcbCWBgLjIWxMBYYC2NhLDAWxsJYYCyMhbHAWBgLY4GxMBbGAmNhLIwFxsJYGAuMhbEwFhgLY2EsjGUsjIWxMBYYC2NhLDAWxsJYYCyMhbHAWBgLY4GxMBbGAmNhLIwFxsJYGAuMhbEwFhgLY2EsMBbGwlhgLIyFscBYGAtjgbH4t+e8EvttvJMfAAAAAElFTkSuQmCC">
    This is the problem of transparent border. The image should cover the whole div. No space should be left.<br><br>    
    By the way, the text is editable. you can edit to generate a effect of variable height
  </div>
</div>

<div class="outer-container" style="background: #222222">
  <div class="inner-container" contenteditable="true" style="background: #00FF00">
    <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASwAAABkCAQAAACWCMVLAAAAy0lEQVR42u3SMREAAAjEMN6/MUQxYIKBIZHQa3oKzsVYGAtjYSwwFsbCWGAsjIWxwFgYC2OBsTAWxgJjYSyMBcbCWBgLjIWxMBYYC2NhLDAWxsJYYCyMhbHAWBgLY4GxMBbGAmNhLIwFxsJYGAuMhbEwFhgLY2EsMBbGwlhgLIyFscBYGAtjgbEwFsYCY2EsjAXGwlgYC4yFsTAWGAtjYSwwFsbCWGAsjIWxwFgYC2OBsTAWxsJYImAsjIWxwFgYC2OBsTAWxgJj8dsCnQ+w9W1K/lEAAAAASUVORK5CYII=">
    This should be how it look without hover, but then the hover shift the position of div slightly.
    
    This is some text you can edit
  </div>
</div>

CSS

.outer-container {
  width: 100%;
}
.inner-container {
  margin: auto;
  width: 300px;
  margin-bottom: 0px;
}
.inner-container:hover {
  outline: 1px solid blue;

}