我的图像无响应

Question

我正在尝试实施响应式图片徽标，但它始终没有响应。图像宽度和高度大小相同。请给我一个解决方案。

<div class="navbar-header">
   <a class="navbar-brand" href="#">
     <img src="~/img/flying_logo.png" class="img-responsive">
   </a>
</div>

CSS。

.navbar-brand {
  position: absolute; 
  display: block;
  width: 260px;
  height: 65px; 
  left: 10px; 
  top: 10px;
}

Answer 1

这对我有用：

img-responsive {
   max-width: 100%;
  height: auto;
}

或者请添加你的CSS。

Answer 2

只需为图片添加css即可。这是代码。

<style>
 .navbar-header img{
   width:100%;
   height:auto;
 }
</style>`

添加此css后，您的图像将响应所有屏幕。

Answer 3

我们可以将此css用于图像标记，如

img{ width:100%; height:auto; }

在bootstrap css中，此标记已经可用。如果没有那么添加。 它不会影响你的引导目的。它适用于您网站中的所有图片。

Answer 4

是否有助于将div代码更改为：

<div class="navbar-header">
  <a class="navbar-brand img-responsive" href="#">
    <img src="~/img/flying_logo.png">
  </a>
</div>