HTML & CSS Image Carousel Help

[Krygore]

Hey guys! I am trying to make an image carousel to put on my personal website and immediately noticed that the images would drastically change in size. Is there a good set of standards when it comes to the dimensions of images used in a carousel? Is there a standard in the size of the carousel itself? Mine currently takes up the width of the page and then varies in height depending on the image used.

Here's my code (although I don't think you'll need it for what I'm asking about)

HTML:

  <section id="sneakpeek">
    <h2 class="sneakpeek-head">Personal Works</h2>
  <div class="container-fluid">
    <div id="carouselExampleFade" class="carousel slide carousel-fade" data-bs-ride="carousel">
      <div class="carousel-inner">
        <div class="carousel-item active">
          <img class="img-size-1" src="images/Fish Photos/Falcor1.jpg"d-block w-100" alt="King Betta Fish">
        </div>
        <div class="carousel-item">
          <img class="img-size-2" src="images/My Carvings/SalmonBench.jpg" class="d-block w-100" alt="Salmon Bench Carving">
        </div>
        <div class="carousel-item">
          <img class="img-size-1" src="images/Fish Photos/Merlin1.jpg" class="d-block w-100" alt="Black Orchid Crowntail Betta">
        </div>
        <div class="carousel-item">
          <img class="img-size-2" src="images/My Carvings/NameSign.jpg" class="d-block w-100" alt="Personal Name Sign">
        </div>
      </div>
      <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleFade" data-bs-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Previous</span>
      </button>
      <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleFade" data-bs-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Next</span>
      </button>
    </div>
  </div>
</section>

CSS:

#sneakpeek {
  background-color: #334257;
  padding: 20px;
  border-radius: 20px;
  text-align: center;
  color: #548ca8;
  font-size: 1.5rem;
  text-shadow: 5px 3px 3px #000;
}
.carousel-inner img {
  border-radius: 20px;
  margin: auto;
}

SIDE NOTE: What is the best way to include an image in a website? Is it ok to have it direct from my computer files or should I use an image uploader and use the image link?

All feed back welcome 🙂

 

[Krygore]

I should also state that I am using the Bootstrap V5.1 on this document as that is where I got the template for the carousel.