具有最小高度的英雄图像：100vh 太大

Question

I am using min-height: 100vh on a hero image, but I am noticing on lg-xl screens the image becomes extremely large. Is there a way to correct this or cap the height of the hero image without affecting the overlay within the image. My code is as follows:

<div className="bg-img"></div>

.bg-img {
min-height: 100vh;
background-image: url('https://storage.googleapis.com/youfit-assets/nologo.png');
background-size: cover;
}

Answer 1

Try doing height: 100vh; instead of min-height: 100vh; . Maybe that is what is bugging you.

And then I tested it and saw that the attribute className is invalid and should be class .

Answer 2

Try this

*{
  margin: 0px;
  padding: 0px;
  
 }
 body{
 min-height: 100vh;
 }
.bg-img{
 height: 100vh;
}

This will probably work in your case