Sign in

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.

I was thinking to build a “carousel effect” for photos on my personal website one day and I suddenly thought of Bootstrap carousel. I used the code on this site for the first time but I found the “slide” effect is a bit wired for me and I don’t find a way to fix it.

Then I used an npm package named “react-material-ui-carousel”. The “slide” and “fade” animation works well. However, some odd effects appeared either.

Here is my initial code:

Showcase.js

At the first time of rendering the page, there is a loading time for rendering each image. Therefore, during…


Suppose that we have built a navbar in React using pure CSS, the next step is to make it more functional. For example, we have four links in the navbar (‘Home’, ‘About’, ‘Projects’, and ‘Contact’) for a personal portfolio website. When we click one of them, the page should be scrolled down to the specific part on the main page.

In the pure HTML, things are quite simple to achieve our goal:

<a href= “#content1” >Content1</a>

<div id= “content1”>…</div>

However, in React, we use components, which makes it quite confusing to put the anchor tag combined with its corresponding contents.


  • Using Window.scrollY to detect whether the page is scrolled or not, then add the corresponding class name.
Navbar.js

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