Автоматическое изменение размеров по центру встроенной Flash (HTML / CSS) - PullRequest
Новая
       7

Автоматическое изменение размеров по центру встроенной Flash (HTML / CSS)

6 голосов
/ 22 декабря 2011

Я - дизайнер медиа-движений, пытаюсь включить некоторые из моих работ для клиента в веб-сайт для ее рождественского подарка.Я пытаюсь изменить размер .swf, чтобы он соответствовал размеру браузера, так как фиксированный размер действительно мешает моему иначе изменяющему размер макету.

Каждый раз, когда я устанавливаю ширину / высоту .swf на «100%» или «auto», фильм обрезается сверху и снизу под контейнерами 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>

Ответы [ 4 ]

3 голосов
/ 16 ноября 2012

В файле прошивки
Set
Stage.scaleMode = "noScale";

HTML-файл
заданная ширина объекта 100%

2 голосов
/ 31 января 2012

Это просто много кода. я думаю, что вопрос переполнения стека

Если вам нужен ответный flash-объект с помощью css, вы должны посмотреть здесь или для более короткой версии здесь

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, чтобы вы могли избавиться от большей части вашего кода и реализовать что-то вроде этого

1 голос
/ 08 июня 2012

Вы должны взглянуть на http://fitvidsjs.com/. Похоже, это то, что вам нужно.

1 голос
/ 13 января 2012

Надеюсь, что это может указать вам в правильном направлении. Но, как указывает Юнзен, он-лайн пример, где мы действительно можем видеть элементы, которые вы встраиваете, было бы здорово. 

<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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...