个人中心
gpt4 book ai didi

css - 自动调整居中嵌入式 Flash (HTML/CSS)

转载 作者：技术小花猫 更新时间：2023-10-29 11:20:19 25 4
gpt4 key购买 nike

我是一名动画媒体设计师，我试图将我为客户设计的一些作品整合到一个网站中，作为她的圣诞礼物。我正在尝试调整 .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>

最佳答案

这只是很多代码。解决我认为的堆栈溢出问题。

如果你想要一个带有 CSS 的响应式 Flash 对象，你应该看看 here或更短的版本 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%;
}

使用那个 css 和这个 html

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

你应该让 embed-wrapper 工作中的所有东西自动调整大小，所以 16:9 所以你应该摆脱你的大部分代码并实现这样的东西

关于css - 自动调整居中嵌入式 Flash (HTML/CSS)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/8606032/

25 4 0
文章推荐： objective-c - ios 解码图像的一部分
文章推荐： linux - Aptana Studio 3 IDE 解压缩文件夹保存在哪里？
文章推荐： linux - 在另一个声音文件中查找一个声音文件
文章推荐： css - Internet Explorer 字体 ssl
技术小花猫
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com