时间戳

首页 > 解决方案 > 我怎样才能使这个标志响应？CSS 不适用于徽标

css - 我怎样才能使这个标志响应？CSS 不适用于徽标

问题描述

我尝试了几种不同的 CSS 编写方式，这是我得到的最接近的方式，但与 jumbotron 的其余部分相比，我无法将徽标缩小到合理的大小。如果将屏幕缩小到手机大小，徽标看起来会很大。我调整了照片的大小，使其最多保持 150 像素。我究竟做错了什么？

<!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;
}

标签： cssresponsive-designgraphical-logo

解决方案

使用大众而不是PX或其他。
width: 100%如果您想要负责任的img，则不需要，并且同时具有maxwidth: 150px;意味着它将始终为150px
您可以使用max-width: 150px;and width: 10vw;（视口的宽度*）；并设置最小宽度：（无论你想要什么，如果你越来越多地调整大小，不要让你的 img 几乎不可见）
这是JSFiddle上的示例

推荐阅读