Becky Becky - 5 months ago 11
CSS Question

Image not taking full height/width when displayed

I have two of the same image. I display one of those images almost all the time, the only exception is in the viewport of 1001px - 1400px I display a cropped version of the image. For some reason the cropped image

laptop2
in the
div
id of
company-information-block2-2
doesn't scale the full width of 100% and
height: auto
. I cannot figure out why because the image above it is structered the exact same way.

I created a fiddle to show it. Please go in and out of the 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

It looks like its because your .section-blocks class has a width: 50% rule which is wrapped around that image. If you add a class to that div wrapping the image in question that makes its width 100%, the image should do what you want it to.

Here is a forked version of your fiddle with it working https://jsfiddle.net/mz50xje7/

I just added this class to that div:

.test{
  width: 100%;
}