Javascript 设置高度和宽度在对话框中不起作用

我是jQuery新手，我正在尝试使用dialog函数。 当我看到jquery.ui提供的演示（animated.html）时，我试图在对话框中插入一个巨大的图像

插入以下代码时效果良好，它限制了对话框的大小

但是，当我从演示中删除样式表（jquery.ui.all.css和demos.css）ref时，对话框现在不受限制，在对话框中显示整个图像而不显示滚动条。 （因此父级现在包含滚动条，这是不可取的）

样式表中的哪个主题可以设置对话框的大小

第一次：

<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
<script src="../../jquery-1.9.1.js"></script>
<script src="../../ui/jquery.ui.core.js"></script>
<script src="../../ui/jquery.ui.widget.js"></script>
<script src="../../ui/jquery.ui.mouse.js"></script>
<script src="../../ui/jquery.ui.draggable.js"></script>
<script src="../../ui/jquery.ui.position.js"></script>
<script src="../../ui/jquery.ui.resizable.js"></script>
<script src="../../ui/jquery.ui.button.js"></script>
<script src="../../ui/jquery.ui.dialog.js"></script>
<script src="../../ui/jquery.ui.effect.js"></script>
<script src="../../ui/jquery.ui.effect-blind.js"></script>
<script src="../../ui/jquery.ui.effect-fade.js"></script>
<script src="../../ui/jquery.ui.effect-explode.js"></script>
<link rel="stylesheet" href="../demos.css">

<script>
$(function() {
   $( "#dialog" ).dialog({
    autoOpen: false,
    show: {
  effect: "fade",
  duration: 1000
        },
    hide: {
  effect: "explode",
      duration: 1000
     },
    maxWidth:400,
    maxHeight: 300,
    width: 400,
    height: 300,

});

$( "#opener" ).click(function() {
  $( "#dialog" ).dialog( "open" );
});
});
</script>

$（函数（）{
$（“#对话框”）。对话框({
自动打开：错误，
展示：{
效果：“褪色”，
持续时间：1000
},
隐藏：{
效果：“爆炸”，
持续时间：1000
},
最大宽度：400，
最大高度：300，
宽度：400，
身高：300，
});
$（“#开场白”）。单击（函数（）{
$（“对话框”）。对话框（“打开”）；
});
});

第二次：

<script src="../../jquery-1.9.1.js"></script>
<script src="../../ui/jquery.ui.core.js"></script>
<script src="../../ui/jquery.ui.widget.js"></script>
<script src="../../ui/jquery.ui.mouse.js"></script>
<script src="../../ui/jquery.ui.draggable.js"></script>
<script src="../../ui/jquery.ui.position.js"></script>
<script src="../../ui/jquery.ui.resizable.js"></script>
<script src="../../ui/jquery.ui.button.js"></script>
<script src="../../ui/jquery.ui.dialog.js"></script>
<script src="../../ui/jquery.ui.effect.js"></script>
<script src="../../ui/jquery.ui.effect-blind.js"></script>
<script src="../../ui/jquery.ui.effect-fade.js"></script>
<script src="../../ui/jquery.ui.effect-explode.js"></script>

<script>
$(function() {
    $( "#dialog" ).dialog({
        autoOpen: false,
        show: {
            effect: "fade",
            duration: 1000
        },
        hide: {
            effect: "explode",
            duration: 1000
        },
              maxWidth:400,
    maxHeight: 300,
    width: 400,
    height: 300,
    overflow: 'auto',
    });

    $( "#opener" ).click(function() {
        $( "#dialog" ).dialog( "open" );
    });
});
</script>

$（函数（）{
$（“#对话框”）。对话框({
自动打开：错误，
展示：{
效果：“褪色”，
持续时间：1000
},
隐藏：{
效果：“爆炸”，
持续时间：1000
},
最大宽度：400，
最大高度：300，
宽度：400，
身高：300，
溢出：“自动”，
});
$（“#开场白”）。单击（函数（）{
$（“对话框”）。对话框（“打开”）；
});
});

我很困惑。我可以猜实际的对话框调用发生在第二个对话框中，您没有传递为第一个对话框所做的任何选项。当查看jquery.ui.dialog.css时，工具栏中只有一些样式等等，css对js的影响会很大吗？请将您的代码放在JSFIDLE中。