I've tried a few different ways of writing the CSS and this is the closest I get, but I can't get the logo to shrink down to a reasonable size compared to the rest of the jumbotron. If you shrink the screen down to the size of a phone or so, the logo looks huge. I resized the photo so it should stay at most 150px. What am I doing wrong?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta description="">
<meta keywords="">
<title>Jan Clark Studio</title>
<link rel="stylesheet" type="text/css" href="bootstrap.min.css">
<link href="https://fonts.googleapis.com/css2?family=Courgette&family=EB+Garamond:ital@0;1&display=swap" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>
<body>
<div class="container">
<center>
<div class="jumbotron jumbotron-fluid" style="background-color:#487C84">
<div class="title">
<div class="d-inline-flex">
<img src="Photos/Three%20Trees%20001.png" class="img-fluid">
<h1>Jan Clark Studio</h1>
</div>
</div>
<ul class="nav justify-content-center">
<li class="nav-item">
<a class="nav-link active" href="index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
</div>
</div>
<div class="indexphoto">
<img src="Photos/American%20Kestral%20-%20Looking%20For%20A%20Piece%20Of%20The%20Action%20%20--Watercolor%20by%20Jan%20Clark%20-%20use.JPG" class="img-fluid" max-width="100%" max-height="auto">
<h3><p>American Kestral - Looking for a Piece of the Action</p></h3>
<h5><p><i>Watercolor</i></p></h5>
</div>
</center>
</div>
</body>
</html>
div.title img {
width: 100%;
max-width: 150px;
height: auto;
float: left;
margin-right: 1.5rem;
}
use VW instead of PX or whatever.
width: 100% is not needed if you want responsible img, and having max width: 150px; at the same time means that it will be always 150px
You can use max-width: 150px; and width: 10vw; (the width of the viewport*); and set min-width:(whatever you want, to don't make your img very almost invisible, if you resize more and more)
Here's example on JSFiddle