I was coding a website and found an issue like this:

These are two <div> with a <img> respectively, something like this:

<div>

<img/>

</div>

Although I set the <img> to height:100%; there was still a slight gap you can see in the image above. In dev tool, it showed that the <img> itself didn’t cover the entire height of its parent <div>.

Solution:

set display:block; to <img>, then the gap dispears.

It is quite tricky to use inline style CSS in React.

  • Remember always use {{}}
  • In {{}}, use format:

field: value”,

<div style={{backgroundImage: `url(${ backgroungImg })` }}></div>

  • backgroundImg is a URL address or a relative address.

Neptune

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store