如何让图片自适应容器的宽度和高度

使用的是jquery UI，我想要的效果是resize的时候，图片的尺寸能够自适应容器的宽高。
但是问题来了，当容器的宽高大于图片的宽高的时候，图片就不会再变大了，而是保持自己的宽高？
这样的写的话，应该怎么破？只使用css能够解决问题么？

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI Resizable - Default functionality</title>
  <link rel="stylesheet" href="jquery-ui.css">
  <script src="jquery-1.10.2.js"></script>
  <script src="jquery-ui.js"></script>
  <link rel="stylesheet" href="style.css">
  <style>
  #resizable { width: 150px; height: 150px; padding: 0.5em; text-align: center; display: table-cell; vertical-align:middle;}
  #resizable h3 { text-align: center; margin: 0; }

  #myimg{ max-width: 100%; max-height: 100%; vertical-align: middle;}
  </style>


<script>
  $(function() {
    $( "#resizable" ).resizable();
  });
  </script>


</head>
<body>



<div id="resizable" class="ui-widget-content">
  <img src="0f1077ba53.png" alt="" id="myimg">
</div>




</body>
</html>

所有代码的下载地址：http://pan.baidu.com/s/1nt85Pqh

修改成这样:这样可以保持比例了～

#myimg{ min-width: 100%; min-height: 100%; vertical-align: middle;}

题主补充的超出了范围
原因：

#resizable {
width: 150px; height: 150px;//这里限定了大小
padding: 0.5em; text-align: center; display: table-cell; vertical-align:middle;}

解决

#resizable {
//删除掉
padding: 0.5em; text-align: center; display: table-cell; vertical-align:middle;}

加入js约束

$( "#resizable" ).resizable({aspectRatio: .8});

more

修改你的一行css，不按照比例

#myimg{ width: 100%; height: 100%; vertical-align: middle;}

【热门文章】