My image carousel is giving me trouble with responsiveness, specifically the height of the images. While the width looks okay, the height is only half of what I need. Can someone offer some ideas on how to make my image height 100% responsive? I've tried setting it to 500px, but I want it to adjust its height automatically.
Here is one of the images:
And here is another image for reference:
Below is the HTML code snippet:
<!DOCTYPE html>
<html>
<head>
<title>Student Portal</title>
<link rel="stylesheet" href ="css/bootstrap.min.css">
<link rel="stylesheet" href="font-awesome/css/font-awesome.min.css">
<link href="style.css" rel ="stylesheet">
<link rel="shortcut icon" type="img/png" href="img/asd.png"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
...
</html>
Next up, a sample from the CSS file:
.navbar-header{
height: 74px;
}
...
.carousel-inner img{
height: auto;
width: 100%;
}
@media(min-width: 768px) and (max-width: 1024px){
.img-responsive{
width: 260px;
height:70px;
}
...
}