2014-12-02 5 views
-4

div 안에 지정된 너비의 그림을 넣으려고합니다. 참조div 안에 그림 배치하기

<div class="Designs"> 

     <p>Designs</p> 

      <div class="Thumbnails" data-animation="animated pulse"> 

       <a href="images/Halloween/bat.png"><img src="images/Halloween/bat_sm.png" width="130" height="76"/></a> 

      </div>  
    </div> <!-- End Designs --> 


<style> 

#content .Designs .Thumbnails img { 
margin: .3em 0; 
min-width: 0; 

} 

#content .Designs .Thumbnails { 
width: 143px; 
height: 95px; 
margin: auto; 

} 

</style> 

내 웹 사이트 : 이미지가 DIV 크기보다 여전히 더 큰 그러나 http://mast.salemstate.edu/itc18244/Portfolio/

답변

1

당신의 CSS 코드에서 다음 바꾸기 : -와

img { 
    min-width: 246px; 
    float: left; 
    margin-right: 2em; 
    margin-top: 6px; 
    margin-left: 1em; 
    } 

을 : - 내 사진을 위해 일하지만, 슬라이드 쇼 사진에 대해 여전히 사업부 중앙에 있지

img { 
    min-width: 0px; 
    float: left; 
    margin-right: 2em; 
    margin-top: 6px; 
    margin-left: 1em; 
    } 
+0

? 그래서 나는 화살을위한 두 개의 추가적인 div를 만들었다. (어떤 이유에서 그것들을위한 너비를 설정할 수 없다.) 그리고 "박쥐"그림이 자신의 div에 집중되기를 바란다. –

+0

이것은 반드시 작동 할 것이다. ........ // #theDiv { 너비 : 690px; 신장 : 483px; 텍스트 정렬 : 가운데; 세로 정렬 : 중간; } #theImg { 최대 너비 : 600px; 최대 높이 : 400px; } – 3Demon

+0

아직 변경되지 않은 경우 내 사이트를 살펴보고 의미가 무엇인지 알 수 있습니다. 재정의가 필요한 CSS 규칙이 있다고 생각합니다. http://mast.salemstate.edu/itc18244/Portfolio/ –

4

당신은 라인에 styles.cssmin-width: 246px이있는 44

당신은 사용하는 것을 덮어 쓸 수 있습니다 :

.Thumbnails img {min-width: 0;} 

더 좋게는 이미지가 필요한 곳에 이미지로 min-width을 설정하고 모든 이미지로 설정하지 마세요. 특화된 선택자는 img보다 큼).

3

당신을 styles.css 파일의 라인 (44)에, 당신은 :

img { 
min-width: 246px; 
float: left; 
margin-right: 2em; 
margin-top: 6px; 
margin-left: 1em; 
} 

min-width: 246px; 규칙이 우선하고있다. 해당 규칙을 제거하거나 무시해야합니다.