CSS 样式不正确 - 将无法工作(奇怪)

Question

我什至不知道从哪里开始。当我将大小调整到 1600px 以下时，即使它有媒体查询来调整大小/隐藏/移动元素，网站也会中断 100%。但是为了确定一个我无法解决的问题，我在 id 中有一个徽标，该徽标的高度设置为 175px，宽度设置为 auto。在任何浏览器大小下，它始终是 564px 的高度。查看下面的一些代码：

img #fpa-logo {
bottom: -25px;
height: 175px;
margin-left: 12.5%;
position: absolute;
width: auto;
}

<div class="row">
<div class="col-sm-12 nav" id="nav-w-back">
<div class="col-sm-5 fLeft">
<a href="http://www.fpacny.com"><img src="../images/FPA-logo-new150-02.png" alt="FPA Logo" id="fpa-logo"></a>
</div>
<div class="col-sm-7">
<ul class="nav fRight" id="nav-ul">
<li><a href="#">Home</a></li>
<li><a href="#">Services<span style="font-size: .75em"> &#9660;</span></a>
<ul>
<li><a href="#">Personalized Care</a></li>
<li><a href="#">Health Care Services</a></li>
</ul>
</li>
<li><a href="#">Links<span style="font-size: .75em"> &#9660;</span></a>
<ul>
<li><a href="#">Patient Information and Forms</a></li>
<li><a href="#">Patient Friendly Sites</a></li>
</ul>
</li>
<li><a href="#">Staff Bios</a></li>
<li><a href="#">Careers</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</div>
</div>

如果您对更多代码感兴趣 - 测试站点是：http://fpacny.com/index_test.php，您可以在其中使用大小等。此时，您可能会注意到，只有在内联 HTML 样式添加以下内容时，主图像背景才会正确调整大小：

style="height: auto; width: 100%;"

被添加。否则，这也会被打破。

为什么我链接的 CSS 不会覆盖它？我从未在我开发的任何网站上遇到过这个问题，这让我绝对发疯！

JSFiddle： https://jsfiddle.net/hjo8pLxe/

Answer 1

你需要写

img#fpa-logo

以定位徽标。

编辑：刚刚看到您正在使用引导程序4：为什么不在图像上使用"img-fluid"类？然后，如果行/列变小，它就不会变得太大并自动缩小。

<img class="img-fluid" {...} >

或者除了自动调整大小之外，您是否需要任何特殊行为？

而且您还应该更多地研究引导程序的列功能，您在 css 中使用了很多position: absolute，这对于您的设计来说根本不需要，如果您改用引导程序，可以防止很多错误。

Answer 2

将抄送更改为

img#fpa-logo {
bottom: -25px;
height: 175px;
margin-left: 12.5%;
position: absolute;
width: auto;
}