顯示時不顯示全高/寬度的圖像

我有兩個相同的圖像。我幾乎總是顯示其中一張圖像，唯一的例外是在1001px - 1400px的視口中顯示剪切版本的圖像。由於某些原因，div ID中的修剪圖像laptop2company-information-block2-2未縮放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>

來源

2016-07-01 Becky

這是你在找什麼？ https://jsfiddle.net/n8udyrn4/1/ –

它看起來像它，因爲你的.section僞塊級的寬度：50％的規則，它是圍繞圖像包裹。如果您將一個類添加到包含使其寬度爲100％的圖像的div中，則圖像應該按照您想要的方式進行操作。

這是你的小提琴分支版本與它的工作https://jsfiddle.net/mz50xje7/

我只是說這個類來該div：

.test{ 
    width: 100%; 
}

來源

2016-07-01 19:45:02 labago

謝謝。由於其他圖像不顯示，我相信我會在顯示的圖像的垂直邊上獲得邊距。無論如何擺脫空白？ – Becky

@Becky我不確定除了來自body標籤的默認8px邊距以外，還有什麼邊距。你可以通過這樣做刪除它：body {margin：0px} – labago

它不是來自身體。我現在指的是實時頁面。這是在我發佈這個問題之前發生的，現在仍在發生。圖像標籤是否自然放棄？ – Becky

這是因爲第二圖像，.laptop2嵌套內的兩個.section-blocks的div總共，而第一個圖像.laptop只能嵌套在一個。這變得更清晰，當你只是看在HTML結構的簡化版本：

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

由於.section-blocks有50％的寬度，內部.section-blocks佔用它的寬度的50％的父元素。這將內部.section-blocks的寬度減少爲頁面寬度的25％，並使第二張圖像佔用第一張圖像寬度的一半。

來源

2016-07-01 19:55:28 greengiraffe

顯示時不顯示全高/寬度的圖像

回答

相關問題