外部樣式未應用於img標簽

Question

外部樣式不是僅應用於img標簽。 盡管它被應用於同一文件中的其他標簽。

Home.php

<link rel="stylesheet" href="styles.css" type="text/css"/>
<link rel="stylesheet" href="css/bootstrap.min.css"/>
<script src="jquery-3.1.0.js"></script>
<script src="js/bootstrap.min.js" ></script>
<div class="col-sm-3 thumbnail" style="height: 350px;">
    <img src="Images/1000px-Htc_new_logo.svg.png">
    <p class="test" >
        this is just  for testing the css link
    </p>
</div>

styles.css

img{
    height: 300px;
    width: 100%;
    border: solid 1px;
}
p{
    border: solid 1px;
}

p標簽工作正常

Answer 1

在自定義css文件之前添加供應商css（引導程序等），以便在需要時可以覆蓋默認供應商樣式。

Answer 2

您可以嘗試的幾種選擇，

1）換一張圖片試試看。 但不要使用此1000px-Htc_new_logo.svg.png

2）由於您加載了多個CSS文件，因此可以使用Firebug查看是否有一些CSS規則被覆蓋。

3）您可以將css與添加到style.css中的“！important”一起使用，僅用於測試，以查看是否可以將外部樣式應用於img標簽。 請注意！重要的做法不是一個好習慣，只需將其用於調試即可。

img{
height: 300px !important;  /* just use important for debug  */
width: 100% !important; /* just use important for debug  */
border: solid 1px !important;  /* just use important for debug  */

}

Answer 3

嘗試避免使用！important，這不是最佳實踐。 它將在任何地方覆蓋代碼。 而是要更具體一些，在這里我的意思是向這些圖像添加一個類，然后更改該類的屬性。 如

img .imageStyling {
    height: 300px;
    width: 100%;
    border: solid 1px;
}