如何让图片自适应容器的宽度和高度
使用的是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
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
修改成这样:这样可以保持比例了～
题主补充的超出了范围
原因：
解决
加入js约束
more
修改你的一行css，不按照比例