Сделайте масштаб флэш файла равным ширине и поддерживайте высоту в соответствии с ее соотношением сторон

80
9

У нас возникла проблема сделать размер флэш файла 100% в соответствии с шириной родительского div, сохраняя при этом высоту в соответствии с ее соотношением сторон.


Пожалуйста, проверьте код на jsFiddle (http://jsfiddle.net/LgegF) или вставьте указанный ниже код в пустую html-страницу:


<!doctype html>

<html>
<head>
<meta charset="utf-8">

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>

<script type="text/javascript">
swfobject.embedSWF("http://www.diescon.net/yellowfestival/400x400.swf", "flash-content", "100%", "100%", "9.0.0", '', null, {wmode: 'transparent'});
</script>

<style type="text/css">
body {
background-color: #ccc;
margin: 0;
}
#container {
width: 400px; /* Fixed width according to page template */
height: auto; /* Container height should adapt to the content, we do not want to set a fixed height here */
background-color: pink; /* Background of container */
position: absolute;
top: 0;
left: 0;
}
#flash-content {
width: 400px; /* Fill the width of the parent, could be fixed but ideally 100% */
height: 100%; /* We want the height of the flash object/flash content to scale according to the aspect ratio of the swf, we do not want to set a fixed height here */
}

/* This is what we really want */
#what-we {
width: 400px;
height: auto;
background-color: pink;
position: absolute;
top: 0;
right: 0;
}
#really-want {
width: 100%;
height: 400px; /* This is what we really want, but without setting this height fixed */
background-color: yellow;
}
</style>
</head>
<div id="container">
<div id="flash-content"></div>
</div>
<div id="what-we">
<div id="really-want">
<span>This is what we really want</span>
</div>
</div>
</body>
</html>

спросил(а) 2021-01-19T12:39:45+03:00 9 месяцев назад
1
Решение
92

У меня есть аналогичная проблема, и я нахожу эту страницу очень полезной:
http://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php


Основываясь на том, что я узнал в этой статье, я предлагаю изменить свой HTML-код на:


<div id="container">
<div class="videoWrapper">
<div id="flash-content"></div>
</div>
</div>

И чтобы изменить код CSS, добавив:

.videoWrapper {
position: relative;
padding-bottom: 100%; /* 1:1 */
padding-top: 0px;
height: 0;
}
.videoWrapper object, .videoWrapper embed, {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

Вы можете увидеть результат здесь:
http://jsfiddle.net/LgegF/56/


Надеюсь на эту помощь.


PatBriPerso

ответил(а) 2021-01-19T12:39:45+03:00 9 месяцев назад
46

Опустить объявление высоты css для контейнера flash alltogether. Swf обычно делает масштаб (или вы можете установить их масштабное поведение в параметрах embed/swfobject), поэтому, если вы просто ограничиваете ширину, высота самого swf масштабируется соответственно.

[править:]
Рабочая скрипка (с очень рудиментарным кодом вставки swf): http://jsfiddle.net/LgegF/1/
Вы заметили, как swf масштабируется при масштабировании браузера. Белый сверху и снизу swf связан с включением объекта, swfobject или тегами дает вам контроль над тем, как сам swf масштабируется (режим масштабирования, выравнивание, valign и т.д.). Однако вы заметили, что swf использует ширину контейнера для определения его размера, то есть подгонка ширины и масштабирование высоты соответственно.

ответил(а) 2021-01-19T12:39:45+03:00 9 месяцев назад
46

Похоже, что вы ищете


width: 100%;
height: auto;

Сообщите мне, как это работает.


-Брайан

ответил(а) 2021-01-19T12:39:45+03:00 9 месяцев назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема