이미지가 표시 될 때 전체 높이/너비가 표시되지 않습니다.

Question

동일한 이미지가 두 개 있습니다. 거의 항상 그 이미지 중 하나를 표시합니다. 유일한 예외는 1001px 뷰포트에 있습니다 - 1400px 이미지의 자른 버전을 표시합니다. 어떤 이유로 이미지가 인 company-information-block2-2의 자른 이미지 laptop2은 100 % 및 height: auto의 전체 너비를 조정하지 않습니다. 왜 위의 이미지가 똑같은 방식으로 구조화 되었기 때문에 나는 그 이유를 알 수 없습니다.

나는 그것을 보여주기 위해 피들을 만들었습니다. 뷰포트 1001-1400을 들락날락하십시오.

Fiddle

.section-blocks { 
    width: 50%; 
    height: auto; 
    display: inline-block; 
    vertical-align: top; 
} 
.section-block-img { 
    height: 100%; 
    width: 100%; 
} 
.laptop2 { 
    display: none; 
} 
#company-information-block2, #company-information-block2-2 { 
    height: auto; 
} 


/*----------------------------------------------MEDIA QUERY 1001 - 1400--------------------------*/ 

@media screen and (min-width: 1001px) and (max-width:1400px) { 

.laptop2 { 
    display: block; 
} 
.laptop { 
    display: none; 
} 

} 
    <div id="company-information"><div id="company-information-block1" class="section-blocks"> 
      <div class="company-container"> 
       <div class="company-information-block-title mobile-none">ABC ABC</div> 
       <div class="company-information-block-title2 mobile-none">THE COMPANY</div> 
       <div class="company-information-block-description">Knowledge and experience are some of the words to describe 
       The Company. This company is a third generation, family-owned business that has been providing 
       regional services for over 60 years. The creative direction included a clean, modern and 
       simplistic approach for visitors to learn more about them. Functionally we knew showcasing services and projects 
       was the main objective. Viewing the multiple project photos and services is easy because of the dashboard approach. 
       The job summaries do not blend in together to allow each specific category to instantly catch the eye of their target 
       market. 
       </div> 
     </div> 
     </div><div id="company-information-block2" class="section-blocks"><img src="http://optimumwebdesigns.com/images/work/projects/eslich/laptop.jpg" alt="Optimun Designs Responsive Design" class="section-block-img laptop"> 
     <div id="company-information-block2-2" class="section-blocks"><img src="http://optimumwebdesigns.com/images/work/projects/eslich/laptop2.jpg" alt="Optimun Designs Responsive Design" class="section-block-img laptop2"> 
     </div></div> 

Answer 1

이의 모습은 당신의 .section 블록 클래스는 폭이 있기 때문에 : 해당 이미지를 감싸 50 %의 규칙을. 문제의 이미지를 너비가 100 %로 만드는 해당 div에 클래스를 추가하면 이미지에서 원하는대로 할 수 있습니다. 여기

는 https://jsfiddle.net/mz50xje7/ 작업으로 바이올린의 포크 버전입니다

나는 그냥 DIV에이 클래스를 추가

:

.test{ 
    width: 100%; 
} 

Answer 2

이 두 번째 이미지 때문에, .laptop2 두 .section-blocks div의 내부에 중첩됩니다 첫 번째 이미지 .laptop은 하나에 중첩되어 있습니다. 그냥 HTML 구조의 단순화 된 버전을 볼 때이 명확하게 다음 .section-blocks으로

<div class="section-blocks"> 
    <img class="section-block-img laptop"> 
    <div class="section-blocks"> 
    <img class="section-block-img laptop2"> 
    </div> 
</div> 

50 %의 폭을 갖고, 내부 .section-blocks가 폭의 50 %를 차지 부모 요소입니다. 이렇게하면 내부 너비가 페이지 너비의 25 % 인 .section-blocks으로 줄어들고 두 번째 이미지가 첫 번째 이미지 너비의 정확히 절반을 차지하게됩니다.