Question

我试图让我的徽标变得敏感。这是一个小提琴，那里的标识是响应的，但在我的本地机器上它没有响应...... http://testng.org/doc/documentation-main.html#annotations

这是显示我本地机器的GIF https://jsfiddle.net/jfzqbshs/

HTML

    <div class="header">
    <img id="logo" src="assets/logo.png"> 
</div> <!--/ header -->

CSS

    .header{
    width:100%;
    box-sizing: border-box;
    padding-left: 1%;
    padding-top:1%;
    padding-bottom: 1%;
    border-bottom: 1px solid #474547;
}
#logo {
    display: block;
    max-width: 100%;
    height: auto; 
}

谢谢。

Answer 1

您的图片相当小，因此如果您使用max-width，它将永远不会达到100％的宽度。

您可以使用以下内容：

#logo {
  width: 25%;
  min-width: 100px;
  height: auto;
}

这使它负责（25％宽度），但也限制它，所以它永远不会小于100px宽度。您还可以添加max-width（以像素为单位）以避免它变得比实际大（这会导致图像模糊，质量不佳）

.header {
  width: 100%;
  box-sizing: border-box;
  padding-left: 1%;
  padding-top: 1%;
  padding-bottom: 1%;
  border-bottom: 1px solid #474547;
}

#logo {
  width: 25%;
  min-width: 100px;
  height: auto;
}

<div class="header">
  <img id="logo" src="http://placehold.it/200x60/eb7">
</div>
<!--/ header -->

Answer 2

您使用bootstrap还是其他CSS库？也许你的img被你的代码中的某处覆盖了？试试这个来检查：

.header img {
    display: block;
    max-width: 100%;
    height: auto; 
}

甚至：

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

并放入CSS文件的底部。

图像没有响应

2 个答案: