如何使标题中的图像徽标响应

Question

调整窗口大小或在任何设备中浏览网站时，如何使徽标响应

我尝试将宽度设置为100％或添加了img响应类，但没有成功

查看这张图片以了解问题

我正在使用引导程序，我只是希望徽标在任何设备和任何尺寸下都能产生共鸣

Answer 1

我也有同样的问题，这就是我所做的。

  <header id="parent">
    <img id="selector" class="img-responsive" src="yourdir/here.png">
  </header>

如果要“绝对”定位图像，则可以向元素的父级添加相对位置，然后向子级添加绝对位置，在这种情况下为图像。

 #parent{ //example .header in your case
position : relative;
 }

 #selector{
 padding-top : 2px;//to prevent image from touching top[optional]
 width : 19% !important;
 }

肯定会成功，因为它对我有用。 尝试过后，请告诉我。

这些样式中的某些样式在覆盖时会出现问题，即使使用'！important'之后也是如此，因此我使用javascript或jquery强制覆盖。 但是，当您使用javascript / jquery时，它们会服从。 例如

  $('#selector').css({
   'padding-top' : '2px',
   'width' : '19%' //select your prefered width here.
  });

这是在将父级放置在相对位置之后。 即..

  $('#parent').css('position','relative')