CSS图像自动宽度和高度

Question

我有一个div，里面有图像。我希望图像的最大高度或宽度为div但不超过它。 Fiddle - Something like this

{{1}}

没有得到它。我该怎么办？

Answer 1

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

在图像容器中将宽度或高度（仅限一个）设置为自动。

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