使用 <embed> 标签显示 flash文件(swf)格式 ,如何设置 width 和 height 宽度,高度.
1. embed 标签 支持 .swf 格式. .flv 的不支持.
2. 通常情况下, 网站中上传 多个 flash文件. 它的默认大小是不一样的. 而且 可以 宽度 大于 高度(横向的) ; 宽度 小于 高度 (竖向的) .
此时. 最好的的办法 是给 <embed> 设置 一个 固定的 宽度 和高度 .
此时flash 会自动缩放. 至于缩放比例: 如果 先 碰到 高度 , 那么 flash的高度就是 embed的 设置的高度, 宽度等比例缩放;
如果 先碰到宽度, 那么flash的宽度 就是 embed 设置的宽度, 高度等比例缩放.
------------------------------------------------------------------------------------
以下是例子:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>emebedtest</title>
<style type="text/css"> .box {
width: 1000px;
border: 1px solid black;
margin: 20px auto; } </style>
</head>
<body>
<h2 style="text-align: center;">横向</h2>
<div class="box">
<embed src="./flash5516/flash5516.swf" type="" style="border: 1px solid red;">
</div> <div class="box">
<embed src="./flash5516/flash5516.swf" type="" style="border: 1px solid red; width: 800px;">
</div> <div class="box">
<embed src="./flash5516/flash5516.swf" type="" style="border: 1px solid red; width: 800px; margin: 0px auto;">
</div> <div class="box">
<embed src="./flash5516/flash5516.swf" type="" style="border: 1px solid red; width: 800px; height: 600px; margin: 0px auto;">
</div> <div class="box">
<embed src="./flash5516/flash5516.swf" type="" style="border: 1px solid red; width: 800px; height: 600px; margin-left: calc( (100% - 800px)/2 )">
</div> <div class="box">
<embed src="./flash5516/flash5516.swf" type="" style="border: 1px solid red; width: 100%; ">
</div> <hr>
<h2 style="text-align: center;">竖向</h2>
<div class="box">
<embed src="./flash5408/flash5408.swf" type="" style="border: 1px solid red;">
</div> <div class="box">
<embed src="./flash5408/flash5408.swf" type="" style="border: 1px solid red; width: 800px;">
</div> <div class="box">
<embed src="./flash5408/flash5408.swf" type="" style="border: 1px solid red; width: 800px; margin: 0px auto;">
</div> <div class="box">
<embed src="./flash5408/flash5408.swf" type="" style="border: 1px solid red; width: 800px; height: 600px; margin: 0px auto;">
</div> <div class="box">
<embed src="./flash5408/flash5408.swf" type="" style="border: 1px solid red; width: 800px; height: 600px; margin-left: calc( (100% - 800px)/2 )">
</div> <div class="box">
<embed src="./flash5408/flash5408.swf" type="" style="border: 1px solid red; width: 100%; ">
</div> </body>
</html>
<embed src="./flash5408/flash5408.swf" type="" style="border: 1px solid red; width: 800px; height: 600px; margin-left: calc( (100% - 800px)/2 )">
对于 标签 <embed>
width: 800px; height: 600px; 是设置一固定的宽度 和 高度 .
margin-left: calc( (100% - 800px)/2 )
是 让 <embed> 在 父级 div.box 中 水平居中显示. 而垂直居中是不需要的. 因为 div.box 的 高度 就是 由 <embed>撑起来的(600px)
-------------------------------------------------------------------------
网页显示:
横向:


---------------------------
竖向:


使用 <embed> 标签显示 flash文件(swf)格式 ,如何设置 width 和 height 宽度,高度.的更多相关文章
- 解决embed标签显示在div上层【转藏】
解决embed标签显示在div上层,非设置z-index 今天给屌炸了爆笑网增加了视频栏目,但是发现在IE8中,顶部浮动导航的div在移动到embed视频上时,总是被embed的flash文件盖住.分 ...
- 转: object 和embed 标签播放flash
一.介绍: 我们要在网页中正常显示flash内容,那么页面中必须要有指定flash路径的标 签.也就是OBJECT和 EMBED标签.OBJECT标签是用于windows平台的IE浏览器的,而EMBE ...
- embed标签的flash层级太高问题
因为客户要求,项目得兼容IE的兼容模式 页面到了flash都会遮挡底部悬浮的导航. 改变浮动窗口和embed的层级还是不可以.应该不是层级的关系. 最后百度解决方案:在embed标签内添加了wmode ...
- img标签显示本地文件
html: <img src="__IMG__/male.png" id="imgfpic1" style="height: 100%; wid ...
- 2018.11.10 Mac设置Eclipse的 .m2文件夹是否可见操作&&Mac系统显示当前文件夹的路径设置
第一行就是设置为可见的记得要重启Finder不然是没有效果的 第二行就是设置为不可见的 打开"终端"(应用程序->实用工具),输入以下两条命令: defaults write ...
- Android开发遇到的问题:不给include设置width、height,导致ListView GridView内容无法显示
我的目的是做一个带有TextView的ListView列表页面. 以下是这个页面的xml: <?xml version="1.0" encoding="utf-8& ...
- MVC应用程序显示Flash(swf)视频
前段时间, Insus.NET有实现<MVC使用Flash来显示图片>http://www.cnblogs.com/insus/p/3598941.html 在演示中,它也可以显示Flas ...
- embed标签的使用(在网页中播放各种音频视频的插件的使用)
播放器插件使用说明: 代码:< EMBED src=“music.mid”autostart=“true”loop=“2”width=“80”height=“30”> src:音乐文件的路 ...
- 利用FlashPaper在web页面中显示PDF文件(兼容各浏览器)
应项目需求要把PDF内嵌到网页中显示,其中有了很多办法,比如用<embed/>元素放入PDF文件,但是效果不理想,浏览器兼容不理想,在ie9/8(其他版本没有测试)显示会提示下载pdf文件 ...
随机推荐
- angular学习第1步
#### 最专业,最全面的angular的学习文档 https://www.jianshu.com/p/f0f81a63cbcb ### https://www.cnblogs.com/xiaowei ...
- 调节kafka消费信息的大小
Kafka设计的初衷是迅速处理短小的消息,一般10K大小的消息吞吐性能最好(可参见LinkedIn的kafka性能测试).但有时候,我们需要处理更大的消息,比如XML文档或JSON内容,一个消息差不多 ...
- 容器虚拟网卡与网桥docker0虚拟网卡的veth pair的配对
一)基本知识: Docker 安装时会自动在 host 上创建三个网络:none,host,和bridge:详细说明可参考其它文档.我们可用 docker network ls 命令查看: 基于DRI ...
- Keepalive配置说明
配置文件 [root@lb01 keepalived]# cat keepalived.conf ! Configuration File for keepalived global_defs { n ...
- RESTful协议
目的:在符合架构原理的前提下,理解和评估以网络为基础的应用软件的架构设计,得到一个功能强.性能好.适宜通信的架构 解决问题:如何开发在互联网环境中使用的软件,实现网站即软件 涉及主要元素 资源(Res ...
- .NET 控件的认识。
四单元的题目里面,涉及了很多之前没有用过的控件的使用,前12道题都不是很难,所以很快做完了 ,但是后面的因为timer控件找不到,有些操作无法实现,所以就没做,但是也是认真的看了的. 等什么时候把ti ...
- 【调试基础】Part 5 PE格式
PE概念.区块分类
- Rhino学习教程——1.3
在主工具栏的工作视窗配置一栏中,有一个背景图工具. 展开是: . 功能是: 放置背景图 移除背景图 移动背景图 缩放背景图 对齐背景图 隐藏背景图/显示背景图 用“图框平面”工具 也可以导入一个图片 ...
- C_program assignment 2
/* Name: C program assignment 2 Copyright: Author: ShiroKa_X Date: 22/03/17 14:07 Description: */ #i ...
- Altium Designer 使用小技巧2
(a)在没画原理图,直接在PCB上绘制时需要将Tools/Preferences/PCB Editor/Interactiver Routing 中的Current Mode 中的选项选择为 Igno ...