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

부트 스트랩이 일부 스타일을 무시할 수 있습니다. 스타일 뒤에'! important'를 사용하여 우선권이 중요한 것인지 또는 다른 것인지 확인하십시오. – Quiver

(사용자 정의 CSS 파일 전에 (부트 스트랩 등) 공급 업체의 CSS를 추가의) 필요한 경우 기본 공급 업체 스타일을 재정의 할 수 있습니다.

출처

2016-07-20 04:11:56

높이가 설정되지 않고 다른 속성이 잘 작동하는 다른 문제가있는 것 같습니다. –

파이어 버그 또는 콘솔을 사용하여 우선하는 스타일이있는 위치를 확인하십시오. 계단식 문제 일 수도 있습니다 (id보다 많은 요소, id보다 많은 클래스 등). –

몇 가지 옵션을 시도해 볼 수 있습니다.

1) 다른 이미지를 변경하여 시도해보십시오. 하지만이 파일을 사용하지 마십시오. 1000px-Htc_new_logo.svg.png

2) 여러 CSS 파일을로드했기 때문에 Firebug를 사용하여 CSS 규칙이 무시 될지 판단 할 수 있습니다.

3) 외부 테스트를 img 태그에 적용 할 수 있는지 확인하기 위해 test.css에 "! important"가 추가 된 css를 사용할 수 있습니다. 중요한 것은 좋은 습관이 아니라 단지 디버그 용으로 사용하는 것입니다.

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

시험 후 사용하지 마십시오! 그것이 가장 좋은 방법이 아니다 중요합니다. 그것은 모든 곳에서 코드를 오버라이드 할 것입니다. 그보다 더 구체적인 것은 여기에 그 이미지에 클래스를 추가 한 다음 클래스 속성을 변경한다는 의미입니다. 예 :

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

출처

2016-07-20 04:40:52 Alan

img 태그에 외부 스타일이 적용되지 않습니다.

답변

관련 문제