自适应容器
使用的是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>版权声明：本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
-
IT从业
修改成这样:这样可以保持比例了～
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;}
2019-07-17 19:24:39赞同 展开评论