在显示时不采用完全高度/宽度的图像
在显示时不采用完全高度/宽度的图像
提问于 2016-07-01 19:38:33
我有两个相同的图像。我几乎每时每刻都会显示其中的一个图像，唯一的例外是在1001px-1400px的视口中，我显示的是该图像的裁剪版本。由于某些原因，在laptop2的div id中裁剪的图像company-information-block2-2没有缩放100%和height: auto的全部宽度。我不知道为什么，因为上面的图像是用完全相同的方式构造的。
我创造了一把小提琴来展示它。请进出视口1001-1400。
.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>回答 2
Stack Overflow用户
回答已采纳
发布于 2016-07-01 19:45:02
它看起来像它，因为您的.节块类有一个宽度: 50%的规则，它被包装在该图像周围。如果您向该div添加了一个类，该类包装的图像宽度为100%，则该图像应该执行您希望它做的事情。
这里是一个分叉版本的您的摆弄它工作的https://jsfiddle.net/mz50xje7/
我刚把这个类添加到这个div中：
.test{
width: 100%;
}Stack Overflow用户
发布于 2016-07-01 19:55:28
这是因为第二个图像，.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%，并使您的第二个图像占用第一个图像宽度的一半。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/38152875
复制相关文章
相似问题
腾讯云开发者
