CSS 图像自动宽度和高度

Question

我有一个 div，里面有图像。我希望图像具有最大高度或宽度作为 div 但不超过它。 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%;
}

没听懂。我该怎么办？

Answer 1

问题是图像的容器有固定的位置，宽度/高度为 100%，所以它可以占据整个页面。您可以将 .gcontainer 放在具有固定位置和指定尺寸的 div 中:

#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>