如何在导航栏 html + css 中使图像响应

乌萨马·阿尔塔夫

我正在使用此代码

<div>
  <nav class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="container">
      <div class="d-flex flex-row justify-content-center align-items-center">
        <a class="navbar-brand" href="#">
          <img class="img-logo" src="https://www.instagram.com/static/images/web/mobile_nav_type_logo.png/735145cfe0a4.png" alt="" loading="lazy" style="width:12%;height:auto; float: left;">
          <h1 style="color: #89216b; float: right; margin-top: auto; margin-bottom: auto; font-size: all;">Trendings</h1>
        </a>
      </div>
    </div>
  </nav>
</div>

一切都很完美但是当我在移动设备上看到它时图像尺寸很小并且文本尺寸保持不变我只希望图像尺寸不会小

风险破坏者

根据您所拥有的,.. 您正在使用一些 css 框架,因为您拥有:

d-flex flex-row etc

如果是这样,为什么要使用内联样式?...无论如何,如果您要设计任何样式,请编辑图像:

.img-logo {
 width: 100%;
 height: auto;
 max-width: 100px;
}

或内联...

<img class="img-logo" src="img" alt="" loading="lazy" style="
    width: 100%;
    height: auto;
    max-width: 100px;
">

100px 只是我的例子,你可以按照你的意愿做正确的尺寸。这将是您的图像风格,因此它可以在任何尺寸下看起来都很好。

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章