I'm having trouble adjusting the width and height of my images in the code. Whenever I set them to less than 100%, it messes up the layout and the images get cropped. I want them centered without taking up so much space.
I've resized all my images to around 500x500 or 500x660 to prevent stretching. But whenever I try to change the height and width in the code, it throws everything off. Should I switch from using a carousel to a gallery or cards? I just want everything to be centered on the page without taking up the entire space.
<style>
body {font-family: Arial, Helvetica, sans-serif; margin: auto;}
.carousel-inner img{width: 100%; height: 100%; margin-top: 100px; margin-bottom: 100px}
</style>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-success">
<span class="navbar-brand mb-1 h1">Home</span>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="nav navbar-nav navbar-right">
<li class="nav-item">
<a class="nav-link" href="./index.html">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="./gallery.html">Gallery</a>
</li>
<li class="nav-item">
<a class="nav-link" href="./contact.html">Contact Us!</a>
</li>
</ul>
</div>
</nav>
<p><br /><br /></p>
<!--gallery-->
<div class="container">
<div id="blah" class="carousel slide" data-ride="carousel">
<!--indicators-->
<ul class="carousel-indicators">
<li data-target="#blah" data-slide-to="0" class="active"></li>
<li data-target="#blah" data-slide-to="1"></li>
<li data-target="#blah" data-slide-to="2"></li>
<li data-target="#blah" data-slide-to="3"></li>
<li data-target="#blah" data-slide-to="4"></li>
<li data-target="#blah" data-slide-to="5"></li>
<li data-target="#blah" data-slide-to="6"></li>
<li data-target="#blah" data-slide-to="7"></li>
<li data-target="#blah" data-slide-to="8"></li>
<li data-target="#blah" data-slide-to="9"></li>
<li data-target="#blah" data-slide-to="10"></li>
</ul>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="imgs/1handle.jpg" alt="crystal handle">
</div>
<div class="carousel-item">
<img src="imgs/4rods.jpg" alt="a group of rods by me" >
</div>
<div class="carousel-item">
<img src="imgs/blackcollage.jpg" alt="black rod" >
</div>
<div class="carousel-item">
<img src="imgs/bluecollage.jpg" alt="royal blue rod">
</div>
<div class="carousel-item">
<img src="imgs/greencollage.jpg" alt="green rod" >
</div>
<div class="carousel-item">
<img src="imgs/redcollage.jpg" alt="red rod" >
</div>
<div class="carousel-item">
<img src="imgs/shinybluecoll.jpg" alt="metallic blue rod">
</div>
<div class="carousel-item">
<img src="imgs/whiteredcoll.jpg" alt="white and red rod">
</div>
<div class="carousel-item">
<img src="imgs/handles.jpg" alt="assorted handles">
</div>
<div class="carousel-item">
<img src="imgs/customer.jpg" alt="happy customer testing the waters">
</div>
</div>
<!--controls/arrows-->
<a class="carousel-control-prev" href="#blah" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#blah" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>
</div>