CODEWITHSUNDEEP
css
X Pahadi
X Pahadi

Reputation: 7463

CSS Image auto width and height

I have a div which has image inside it. I want the image to have maximum height or width as the div but not exceed it. Fiddle - Something like this

div.gcontainer{
    position: fixed;
    margin: 0;
    padding: 0;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}
div.gcontainer img{
    position:relative;
    max-width:100%;
    max-height:100%;
}

Not getting it. What should I do?

Upvotes: 1

Views: 372

Answers (2)

Samurai
Samurai

Reputation: 3729

The problem is image's container has fixed position with width/height of 100%, so it can take the whole page. You can instead put .gcontainer in a div with fixed position and with specified dimensions:

#container {
  position: fixed;
  left: 0;
  top: 0;
  width: 400px;
  height: 400px;
}
div.gcontainer {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}
div.gcontainer img {
  position: relative;
  max-width: 100%;
  max-height: 100%;
}
<div id="container">
  <div class="gcontainer">
    <img src="http://www.keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg" />
  </div>
</div>

Upvotes: 1

fuzzybear
fuzzybear

Reputation: 2405

in your image container set width or height (one only) to auto.

div.gcontainer img
{
position:relative;
width:100%;
height:auto;
}

Upvotes: 0

Related Questions