Image makes fix sized div larger

Question

I am trying to put an image into my Website. The image is in a div that hast got a fixed size. The Problem is that the image stretches the whole div when I use auto height in CSS.

The Image fits into its div setting its height and width to 100%:

Now I would like to keep the Image unstretched. So I set the width 100% and the height as auto as it is described here After setting that the image is in a layer under the section below but layers on the next part of the page.

here is the HTML Code I used:

<div class="section4">
        <section class="half">
            <div class="officePicContainer">
                <img src="officePic.jpg" alt="New Office of MEGO" class="officePic">
            </div>
        </section>

        <section class="half">


        </section>  
    </div>

And The CSS Code:

 .half {
    height: 50%;
    position: relative;
}

.half:first-child {


}
.half:last-child {
    background: #950049;

}
     .officePic {
        height: auto;
        width: 100%;
    }

How can I resize the image and fitting into its parent div without stretching it? Is it still possible in CSS? Or is Java Script needed?

Thanks for help!

score 0 · Accepted Answer · answered Jul 22 '15 at 12:04

0

Create div and, the background-size:cover css tag and set position: fixed

<div class="demo" style="background-image:url(example.png);background-size: cover; background-position:center center;"></div>

answered Jul 22 '15 at 12:04

Lennart

120
1
11

wait.. I did a mistake. your solution works fine for me. Thanks! – jublikon Jul 22 '15 at 12:11
1

Without JS you have to give the div an fixed height and the Image won't be streched. – Lennart Jul 22 '15 at 12:11
No problem, set my answer as solution to help other guys with the same question ;) – Lennart Jul 22 '15 at 12:15

score 0 · Answer 2 · answered Jul 22 '15 at 12:07

0

<div><img src="http://www.engineering.com/Portals/0/BlogFiles/swertel/heart-cloud.jpg" width=100% /></div>

answered Jul 22 '15 at 12:07

imGaurav

1,043
7
14

Image makes fix sized div larger

2 Answers2