I am facing some challenges with the HTML/CSS code to make all SVG's scale uniformly in terms of height/width. I have set up a simple structure but I'm unsure of what steps to take next.
When I view the images in the browser, they are all scaled to full screen and appear the same size based on their dimensions. However, when integrated into HTML, the results are not quite satisfactory.
Any suggestions or tips would be greatly appreciated.
img {
height: auto;
width: 75%;
}
.card {
display: flex;
justify-content: center;
align-items: center;
} <!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!-- CUSTOM CSS -->
<link rel="stylesheet" href="main.css">
<title>Debugging</title>
</head>
<body>
<!-- COURSES -->
<div class="container courses-container">
<div class="row ">
<!--COURSE 1-->
<div class="col-6 col-md-4 col-xl-2 course-item">
<div class="card text-center">
<img src="https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/aa.svg">
<div class="card-body">
<h5 class="card-title">Monster One</h5>
<p class="card-text">The fish text website will help the designer, developer, webmaster generate a few paragraphs of somewhat meaningful fish text in Russian, and help the beginner orator sharpen their public speaking skills at home.</p>
<a href="#" class="btn btn-primary">Learn More</a>
</div>
</div>
</div>
<!--COURSE 2-->
<div class="col-6 col-md-4 col-xl-2 course-item">
<div class="card text-center">
<img src="https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/USStates.svg">
<div class="card-body">
<h5 class="card-title">Monster Two</h5>
<p class="card-text">The fish text website will help the designer, developer, webmaster generate a few paragraphs of somewhat meaningful fish text in Russian, and help the beginner orator sharpen their public speaking skills at home.</p>
<a href="#" class="btn btn-primary">Learn More</a>
</div>
</div>
</div>
<!--COURSE 3-->
<div class="col-6 col-md-4 col-xl-2 course-item">
<div class="card text-center">
<img src="https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/Steps.svg">
<div class="card-body">
<h5 class="card-title">Guitar</h5>
<p class="card-text">The fish text website will help the designer, developer, webmaster generate a few paragraphs of somewhat meaningful fish text in Russian, and help the beginner orator sharpen their public speaking skills at home.</p>
<a href="#" class="btn btn-primary">Learn More</a>
</div>
</div>
</body>
</html>