html - Image makes fix sized div larger -


i trying put image website. image in div hast got fixed size. problem image stretches whole div when use auto height in css.

the image fits div setting height , width 100%:

enter image description here

now keep image unstretched. set width 100% , height auto described here after setting image in layer under section below layers on next part of page.

enter image description here

here html code 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 css code:

 .half {     height: 50%;     position: relative; }  .half:first-child {   } .half:last-child {     background: #950049;  }      .officepic {         height: auto;         width: 100%;     } 

how can resize image , fitting parent div without stretching it? still possible in css? or java script needed?

thanks help!

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

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

Comments

Popular posts from this blog

Fail to load namespace Spring Security http://www.springframework.org/security/tags -

sql - MySQL query optimization using coalesce -

Maven Javadoc 'Cannot find default setter' and fails -