So I have been having to struggle with this for quite a while, I am not sure how to resize the carousel so that it matches the column height of the blockquote and I can't seem to centre the image div inside the carousel. If I have a large image, the carousel becomes taller than the text.
I would like image1 to be scaled to the same height as image2 whilst also keeping the same aspect ratio.
Here is my code:
Best to view it fullscreen.
.project {
background-color: lightblue;
}
.image1 {
height: 500px;
width: 350px;
background-color: #3178bf;
}
.image2 {
height: 300px;
width: 200px;
background-color: #3178bf;
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="project">
<div class="row align-items-center">
<div class="col-sm-7">
<blockquote class="blockquote text-left description">
<h3 style="margin-left: 30px; margin-top: 10px;">
Title
</h3>
<ul>
<li>
Text goes here
</li>
<li>
Text goes here
<br> Text goes here
<br> Text goes here
<br> Text goes here
<br> Text goes here
<br> Text goes here
<br> Text goes here
<br> Text goes here
<br> Text goes here
<br> Text goes here
</li>
</ul>
<footer class="blockquote-footer">
Date
</footer>
</blockquote>
</div>
<div class="col">
<div id="carousel4" class="carousel slide" data-interval="false">
<ol class="carousel-indicators">
<li data-target="#carousel4" data-slide-to="0" class="active"></li>
<li data-target="#carousel4" data-slide-to="1"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<div class="image1" alt="Test image">
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carousel4" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carousel4" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
</div>