Внешний стиль не применяется к тегу img

Внешний стиль не применяется только к тегу img. Хотя он применяется к другим тегам в одном файле.Внешний стиль не применяется к тегу 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 тег работает абсолютно нормально

источник

2016-07-20 Syed Kumail Haider Naqvi

Не знаете, что именно вы имеете в виду, может быть, bootstrap.css переопределяет ваши styles.css? –

Попробуйте переключить порядок элементов ссылки bootstrap.min.css и styles.css. – Beamer180

. Bootstrap может быть переопределен некоторыми вашими стилями. Попробуйте использовать '! Important' после ваших стилей, чтобы узнать, является ли это главной проблемой или чем-то еще. – Quiver

Добавить поставщика CSS (начальной загрузки и т.д.) перед пользовательского файла CSS (s), чтобы при необходимости можно переопределять стили поставщика по умолчанию.

источник

2016-07-20 04:11:56

теперь возникает другая проблема, что высота не задана, а другие свойства работают нормально. –

Попробуйте использовать Firebug или консоль, чтобы увидеть, где расположены переопределяющие стили. Это может быть каскадная проблема (элемент по id, id over class и т. Д.), –

несколько вариантов, вы можете попробовать,

1) изменить еще одно изображение, чтобы попробовать. но не использовать этот 1000px-Htc_new_logo.svg.png

2) поскольку вы загрузили несколько файлов css, вы можете использовать Firebug, чтобы посмотреть, есть ли какое-то правило css.

3) вы можете использовать css с «! Important», добавленным в ваш style.css только для теста, чтобы посмотреть, можно ли применить внешнее stying к тегу 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 */

}

источник

2016-07-20 04:20:34

Try и избегать использования важно! Это не лучшая практика. Он будет переопределять код повсюду. Вместо этого более конкретно, вот что я подразумеваю под этим, добавляя класс к этим изображениям, а затем изменяя свойства класса. Такие как

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

источник

2016-07-20 04:40:52 Alan

Внешний стиль не применяется к тегу img

ответ

Смежные вопросы