How can I make this logo responsive? CSS isn't working on the logo
Question
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;
}
1 answers
solution1
1 ACCPTED 2020-08-09 20:13:23
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
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.