I'm looking to encapsulate an image within a div element neatly. Specifically, I have screenshots of projects that I want to fit perfectly inside div elements with the class of "portfolioImg." Regardless of the dimensions of the project images, I want them to align perfectly within their respective div containers. My current framework is Bootstrap4. Thank you!
Code Details:
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<body>
<div id="header" class="container-fluid sticky-top">
<div class="row no-gutters">
<div class="col-xl-8">
<h3 id="myText">Shantanu Tomar</h3> </div>
<div class="col-xl"><button class="btn btn-primary" id="bAboutMe"><a href="#portfolioHeading"></a>About Me</button></div>
<div class="col-xl"><button class="btn btn-primary" id="bPortfolio">Portfolio</button></div>
<div class="col-xl"><button class="btn btn-primary" id="bContactMe">Contact Me</button></div>
</div>
</div>
...
</div>
<p>CSS:</p>
<pre><code>#header {
background-color: #9e9e9e;
padding: 0.5% 0.5% 0.5% 0.5%;
}
...
JS:
$(document).ready(function() {
// jQuery functions here
});
View Live Demo on Codepen: Codepen Link