如何让图片自适应容器的宽度和高度
使用的是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
Aendst
10 years ago
Answers
修改成这样:这样可以保持比例了～
#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;}
椎名真白V
answered 10 years ago