html - 显示时图像未占据全高/全宽

Question

我有两张相同的图片。我几乎一直显示其中一张图像，唯一的异常(exception)是在 1001px - 1400px 的视口(viewport)中，我显示图像的裁剪版本。由于某种原因，company-information-block2-2 的 div id 中的裁剪图像 laptop2 未缩放 100% 的全宽和 height: auto。我不明白为什么，因为它上面的图像是以完全相同的方式构造的。

我创建了一个 fiddle 来展示它。请进出视口(viewport)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-blocks 类有一个 width: 50% 规则，它包裹在该图像周围。如果您向该 div 添加一个类来包装有问题的图像，使其宽度为 100%，则该图像应该按照您的要求进行。

这是你的 fiddle 的 fork 版本，它可以工作 https://jsfiddle.net/mz50xje7/

我刚刚将这个类添加到那个 div 中:

.test{
  width: 100%;
}