Question

我有两个相同的图像。我几乎一直在显示其中一个图像，唯一的例外是在1001px的视口中 - 1400px我显示了图像的裁剪版本。出于某种原因，laptop2内容div内的裁剪图片company-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>

Answer 1

它看起来像是因为你的.section-blocks类有一个宽度：50％规则，它围绕着那个图像。如果你将一个类添加到包含有问题的图像的div中，使其宽度达到100％，那么图像应该按照你想要的方式进行。

这是你的小提琴的分叉版本https://jsfiddle.net/mz50xje7/

我刚将这个类添加到该div：

.test{
  width: 100%;
}

Answer 2

这是因为第二个图像.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％，并使第二个图像占据第一张图像宽度的一半。

显示时图像未占据整个高度/宽度

2 个答案: