CODEWITHSUNDEEP
htmlimagecss
Becky
Becky

Reputation: 2275

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>

Upvotes: 0

Views: 1094

Answers (2)

greengiraffe
greengiraffe

Reputation: 89

This is because the second image, .laptop2 is nested inside two .section-blocks divs in total, whereas the first image .laptop is only nested in one. This becomes clearer when you just look at a simplified version of the HTML structure:

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

As the .section-blocks has a width of 50%, the inner .section-blocks takes up 50% of the width of it's parent element. This reduces the width of the inner .section-blocks to 25% of the page width and makes your second image take up exactly half the width of the first image.

Upvotes: 1

labago
labago

Reputation: 1346

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%;
}

Upvotes: 2

Related Questions