自动调整大小居中嵌入式 Flash (HTML/CSS)

发布于 2024-12-22 07:02:39 字数 4661 浏览 2 评论 0原文

我是一名动态媒体设计师，试图将我为客户所做的一些工作整合到一个网站中，作为她的圣诞礼物。我正在尝试调整 .swf 的大小以匹配浏览器大小，因为固定大小确实扰乱了我原本需要调整大小的布局。

每次我将 .swf 的宽度/高度设置为“100%”或“自动”时，影片都会在 div 容器下方的顶部和底部被切断。当我将容器的大小更改为 100% 时，我得到了一个又长又薄的电影。我复制了下面的代码，非常感谢您的帮助。也请随意批评我的代码的任何其他内容——我是 CSS 处女。

非常感谢！ :)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>

<script src="SpryAssets/SpryEffects.js" type="text/javascript"></script>
<script type="text/javascript">
function MM_effectAppearFade(targetElement, duration, from, to, toggle)
{
    Spry.Effect.DoFade(targetElement, {duration: duration, from: from, to: to, toggle: toggle});
}
</script>

<title>Eat, Drink, and Be Mary</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<head>  
<style type="text/css" media="screen">

        body {
        background:url('images/home.jpg');
        background-repeat:no-repeat;
        background-size:cover;
        position:absolute;

        }

        html, body {
        height:100%;
        width:auto;
        min-width:700;
        }

        body { margin:0; padding:0; overflow:hidden; }


        .swfcontainer {
            margin-top:3%;
            width:100%;
            height:30%;
            margin-bottom:1px;
        }

        .swfcontainersmall {
            margin-left:10%;
            height:300px;
            margin-right:10%;
        }

        .flashfile {
            width:100%;
            height:100%;
            text-align:center;
            margin:2; 
            padding:0; 
            overflow:hidden;
        }

        .textcontainer {
            margin-bottom:3px;
            margin-top:0;
            margin-left:0;
            width:100%;
            margin-right:0;
        }

        .textcontainersmall {
        margin-top:1px;
        margin-bottom:1px;
        margin-left:25%;
        margin-right:25%;
        }

        #flashContent { 
        width:100%; 
        height:100%; 
        }


        #wrap { min-height: 100%;}

        #main {overflow:auto;
        padding-bottom: 150px;}  /* must be same height as the footer */

        #footer {position: relative;
        margin-top:-100px; /* negative value of footer height */
        height:100px;
        clear:both;
        border-bottom:solid 4px #333;
        } 

        /*Opera Fix*/
        body:before {
        content:"";
        height:100%;
        float:left;
        width:0;
        margin-top:-32767px;/
        }

</style>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<body>
<div id="wrap">
    <div id="main">
        <div class="swfcontainer">
            <div class="swfcontainersmall">
                <div class="flashfile">
                    <div id="flashContent">


                        <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
                        codebase="http://fpdownload.macromedia.com/
                        pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="300" height="300" align=                                                                   "middle">
                        <param name="SRC" value="EatDrinkAndBeMary.swf">
                        <param name="wmode" value="transparent" />
                        <param name="SCALE" value="noborder" />
                        <param name="BGCOLOR" value= />
                        <embed src="EatDrinkAndBeMary.swf" width="300" height="300" align="middle" scale="noborder" wmode="transparent" bgcolor="transparent"></embed>
</object>
                    </div>
                </div>
            </div>
        </div>


        <div class="textcontainer">
            <div class="textcontainersmall">
        <img src="Images/tasteful.png" alt="Eat, Drink, and Be Mary is a locally-owned catering favorite specializing in delicious appetizers and comforting American favorites for events big and small. We can provide your party with a full, friendly staff to complete your amazing experience." width="auto" height="auto" class="textcontainer" onload="MM_effectAppearFade(this, 3000, 0, 100, false)" />
            </div>
        </div>
    </div>
    <div id="footer">
<img src="Images/MenuBottom.gif" width="100%" height="100px" alt="MenuBottom" />    
    <div>
</body>
</html>

原文

I am a motion media designer trying to incorporate some of my work for a client into a website for her Christmas gift. I am trying to resize a .swf to match the browser size, as the fixed size is really messing with my otherwise-resizing layout.

Every time I set the width/height of the .swf to "100%" or "auto", the movie gets cut off at the top and bottom under the div containers. When I change the size of the container to 100%, I get a long, thin movie. I've copied my code below, and I would really appreciate your help. Feel free to criticize anything else about my code, too--I'm a CSS virgin.

Thanks so much! :)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>

<script src="SpryAssets/SpryEffects.js" type="text/javascript"></script>
<script type="text/javascript">
function MM_effectAppearFade(targetElement, duration, from, to, toggle)
{
    Spry.Effect.DoFade(targetElement, {duration: duration, from: from, to: to, toggle: toggle});
}
</script>

<title>Eat, Drink, and Be Mary</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<head>  
<style type="text/css" media="screen">

        body {
        background:url('images/home.jpg');
        background-repeat:no-repeat;
        background-size:cover;
        position:absolute;

        }

        html, body {
        height:100%;
        width:auto;
        min-width:700;
        }

        body { margin:0; padding:0; overflow:hidden; }


        .swfcontainer {
            margin-top:3%;
            width:100%;
            height:30%;
            margin-bottom:1px;
        }

        .swfcontainersmall {
            margin-left:10%;
            height:300px;
            margin-right:10%;
        }

        .flashfile {
            width:100%;
            height:100%;
            text-align:center;
            margin:2; 
            padding:0; 
            overflow:hidden;
        }

        .textcontainer {
            margin-bottom:3px;
            margin-top:0;
            margin-left:0;
            width:100%;
            margin-right:0;
        }

        .textcontainersmall {
        margin-top:1px;
        margin-bottom:1px;
        margin-left:25%;
        margin-right:25%;
        }

        #flashContent { 
        width:100%; 
        height:100%; 
        }


        #wrap { min-height: 100%;}

        #main {overflow:auto;
        padding-bottom: 150px;}  /* must be same height as the footer */

        #footer {position: relative;
        margin-top:-100px; /* negative value of footer height */
        height:100px;
        clear:both;
        border-bottom:solid 4px #333;
        } 

        /*Opera Fix*/
        body:before {
        content:"";
        height:100%;
        float:left;
        width:0;
        margin-top:-32767px;/
        }

</style>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<body>
<div id="wrap">
    <div id="main">
        <div class="swfcontainer">
            <div class="swfcontainersmall">
                <div class="flashfile">
                    <div id="flashContent">


                        <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
                        codebase="http://fpdownload.macromedia.com/
                        pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="300" height="300" align=                                                                   "middle">
                        <param name="SRC" value="EatDrinkAndBeMary.swf">
                        <param name="wmode" value="transparent" />
                        <param name="SCALE" value="noborder" />
                        <param name="BGCOLOR" value= />
                        <embed src="EatDrinkAndBeMary.swf" width="300" height="300" align="middle" scale="noborder" wmode="transparent" bgcolor="transparent"></embed>
</object>
                    </div>
                </div>
            </div>
        </div>


        <div class="textcontainer">
            <div class="textcontainersmall">
        <img src="Images/tasteful.png" alt="Eat, Drink, and Be Mary is a locally-owned catering favorite specializing in delicious appetizers and comforting American favorites for events big and small. We can provide your party with a full, friendly staff to complete your amazing experience." width="auto" height="auto" class="textcontainer" onload="MM_effectAppearFade(this, 3000, 0, 100, false)" />
            </div>
        </div>
    </div>
    <div id="footer">
<img src="Images/MenuBottom.gif" width="100%" height="100px" alt="MenuBottom" />    
    <div>
</body>
</html>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

独﹏钓一江月 2024-12-29 07:02:39

这只是很多代码。我认为这是一个堆栈溢出问题。

如果您想要带有 CSS 的响应式 Flash 对象，您应该查看此处或较短的版本此处

CSS：

.embed-wrapper {
    width: 100%;
    max-width: YOURMAXWIDTHpx;
}
* html .arve-embed-container {
    margin-bottom: 45px;
    margin-bot\tom: 0;
}

.arve-embed-container {
    position: relative;
    padding-bottom: 56.25%; /* 16/9 ratio */
    padding-top: 30px; /* IE6 workaround*/
    height: 0;
    overflow: hidden;
}                          

.arce-embed-container div,
.arve-embed-container iframe,
.arve-embed-container object,
.arve-embed-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

采用该 css 并使用此 html

<div class="embed-wrapper">
<div class="arve-embed-container">
<object YOURSTUFF=HERE>
</object>
</div>
</div>

你应该让嵌入包装器内的所有内容自动调整大小，所以 16:9 所以你应该摆脱大部分代码并实现类似这样的东西

Thats simply a lot of code. to mutch for a stack overflow question i think.

If you want a reponsive flash object with css your should look here or for a shorter version here

CSS:

.embed-wrapper {
    width: 100%;
    max-width: YOURMAXWIDTHpx;
}
* html .arve-embed-container {
    margin-bottom: 45px;
    margin-bot\tom: 0;
}

.arve-embed-container {
    position: relative;
    padding-bottom: 56.25%; /* 16/9 ratio */
    padding-top: 30px; /* IE6 workaround*/
    height: 0;
    overflow: hidden;
}                          

.arce-embed-container div,
.arve-embed-container iframe,
.arve-embed-container object,
.arve-embed-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

take that css and with this html

<div class="embed-wrapper">
<div class="arve-embed-container">
<object YOURSTUFF=HERE>
</object>
</div>
</div>

you sould get everything inside the embed-wrapper work resizeing automatically so 16:9 so u soudl get rid of most of your code and implement something like this

回复收藏 0 原文

断念 2024-12-29 07:02:39

在Flash文件中
设置
Stage.scaleMode = "noScale";

html 文件
设置对象宽度 100%

回复收藏 0 原文

扶醉桌前 2024-12-29 07:02:39

希望这能为您指明正确的方向。但正如 yunzen 指出的一个在线示例，我们可以在其中实际看到您嵌入的元素，那就太好了。

<html>
    <head>
        <style>
.menu li {
    display: inline;
}
.menu {
    float: left;
    padding: 0;
    border: solid;
}
img {
    float: left;
    width: 200px;
    margin: 0 30px;
    border: solid;
}
#header {
    margin-left: 20%;
    margin-right: 20%;
    padding: 0 5%;
}
        </style>
        <title>
        </title>
    </head>
    <body>
        <div id="header">
            <ul class="menu left">
                <li>Elemento 1</li>
                <li>Elemento 2</li>
            </ul>

            <img src="http://www.google.com/logos/2012/steno12-hp.jpg">

            <ul class="menu right">
                <li>Elemento 3</li>
                <li>Elemento 4</li>
            </ul>
        </div>
    </body>
</html>

Hope this can point you in the right direction. But as yunzen points an online example, where we can actually see the elements your are embedding would be great.

<html>
    <head>
        <style>
.menu li {
    display: inline;
}
.menu {
    float: left;
    padding: 0;
    border: solid;
}
img {
    float: left;
    width: 200px;
    margin: 0 30px;
    border: solid;
}
#header {
    margin-left: 20%;
    margin-right: 20%;
    padding: 0 5%;
}
        </style>
        <title>
        </title>
    </head>
    <body>
        <div id="header">
            <ul class="menu left">
                <li>Elemento 1</li>
                <li>Elemento 2</li>
            </ul>

            <img src="http://www.google.com/logos/2012/steno12-hp.jpg">

            <ul class="menu right">
                <li>Elemento 3</li>
                <li>Elemento 4</li>
            </ul>
        </div>
    </body>
</html>

回复收藏 0 原文