`

能使超大图片充满当前屏幕

阅读更多

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
<!--
.mydiv {
width: 1280px;//图片background.gif的宽度
height: 720px;//图片background.gif的高度
left: 50%; /*FF IE7*/
top: 50%; /*FF IE7*/
margin-left: -640px !important; /*FF IE7 该值为本身宽(width)的一半 */
margin-top: -360px !important; /*FF IE7 该值为本身高(height)的一半*/
margin-left: 0px;
margin-top: 0px;
position: fixed !important; /*FF IE7*/
position: absolute; /*IE6*/
_top: expression(eval(document . compatMode &&
             document . compatMode == 'CSS1Compat') ?
             documentElement . scrollTop +   ( document .
   documentElement . clientHeight-this . offsetHeight )/ 2 : /*IE6*/
             document . body . scrollTop +   ( document . body .
   clientHeight -   this . clientHeight )/ 2 ); /*IE5 IE5.5*/
_left: expression(eval(document . compatMode &&
             document . compatMode == 'CSS1Compat') ?
             documentElement . scrollLeft +   ( document .
   documentElement . clientWidth-this . offsetWidth )/ 2 : /*IE6*/
             document . body . scrollLeft +   ( document . body .
   clientWidth -   this . clientWidth )/ 2 ); /*IE5 IE5.5*/
}
-->
</style>
</head>
<body>
<img src="background.gif" class="mydiv" />
</body>
</html>

分享到:
评论

相关推荐

    Android自适应屏幕大小和layout布局(横屏竖屏)

    - 当应用运行时,系统会根据当前设备的实际屏幕尺寸选择最合适的布局文件加载。 2. **资源的动态选择**: - 所有的`layout`文件在编译过程中会被整合进`R.java`文件中。 - 运行时,Android系统会自动识别当前...

    ios-图片切换,点击缩放.zip

    在iOS中,我们可以调整UIImageView的frame或者bounds以适应屏幕大小,使其充满整个屏幕。同时,为了保持图片的原始比例,我们需要使用UIImageView的contentMode属性,如`.scaleAspectFit`或`.scaleAspectFill`。 ...

    IOS图片自适应大小后绘制在Scrollview上

    4. **图片加载策略**:为了优化性能,通常只加载当前可见或即将可见的图片,其余图片在需要时再加载。这被称为懒加载技术。 5. **自动布局(Auto Layout)**:在使用Auto Layout的情况下,需要为UIImageView设置...

    Flash焦点图片切换代码

    通过监听窗口大小改变事件,可以实时调整图片容器的大小,使图片切换效果始终充满整个视口。 5. 兼容性:由于此代码是基于Flash的,所以它应该能支持各种版本的Internet Explorer浏览器。然而,随着HTML5的普及,...

    Android 多图上传后九宫格图片识别图片数量设置大小

    例如,如果只有一张图片,我们可以让图片充满整个九宫格;如果有三张或更多图片,每张图片则占据相等的空间。 在**多图展示**的过程中,为了保持九宫格的均匀性,我们需要根据图片的数量动态调整每个单元格的大小。...

    电量图片 充电图片

    本资源包含适用于不同分辨率屏幕的电量图片和充电图片,确保在各种Android设备上都能得到清晰、适配的显示效果。 1. **Android开发**:Android是一个开源的操作系统,主要应用于智能手机和平板电脑。开发者可以使用...

    iOS图片点击放大,左右滑动浏览

    5. **布局和约束**:在AutoLayout环境下,我们需要为UIImageView和UIScrollView设置合适的约束,确保图片在不同屏幕尺寸下都能正确显示。对于UIImageView,约束应保持其在UIScrollView内居中;对于UIScrollView,...

    jQuery图片缩放图片图片转动仿QQ空间图片查看特效(全屏,放大,缩小,旋转,镜像,鼠标滚轮缩放)

    在CSS中,定义`.fullscreen`类来改变图片的大小和位置,使其充满屏幕: ```css #image.fullscreen { position: fixed; top: 0; left: 0; width: 100%; height: 100%; } ``` 接下来,实现图片的放大和缩小功能...

    jquery 图片 切换 满屏

    通过设置图片容器的宽高为100%,可以确保图片充满整个浏览器窗口。同时,可能需要使用CSS3的`background-size: cover`属性保持图片的纵横比并填充容器。 **跨浏览器兼容性** 考虑到IE6、7、8等老版本浏览器的特性,...

    jquery自适应图片高度满屏焦点图.zip

    【jQuery自适应图片高度满屏焦点图】是一种常见的网页设计技术,主要应用于网站的首页或者产品展示区域,通过动态调整图片大小和位置,使图片在各种屏幕尺寸下都能填满整个浏览器视窗,从而实现视觉上的冲击力和良好...

    jQuery全屏背景跟随手风琴图片切换特效.zip

    设置为`cover`可以使背景图片自适应填充整个视口,保持宽高比,确保无论窗口大小如何,图片都能充满屏幕。我们还需要用到CSS3的`transition`属性来创建平滑的背景过渡效果。 手风琴图片切换是一种常见的网页交互...

    百度首页如何自定义背景图片.docx

    为了保证最佳的展示效果,建议使用尺寸大于1600*1000像素的图片,因为更大的图片能够更好地适应各种屏幕尺寸,避免因图片缩放而产生的失真。 在上传图片后,您还可以调整图片的透明度,使得背景图片与搜索框、导航...

    jQuery标签导航控制图片全屏切换代码

    3. **全屏切换效果**:为了实现全屏切换,我们可以利用CSS来设定图片的宽高为100%,确保图片充满整个屏幕。同时,使用jQuery的动画功能(如`.fadeIn()`和`.fadeOut()`)可以创建平滑的过渡效果,提升用户体验。 4. ...

    jQuery响应浏览器窗口大小图片排列代码.zip

    然后,使用CSS将图片的宽度设置为100%,高度自动适应,使其充满容器。接下来,jQuery会监听窗口的resize事件,每当窗口大小变化时,遍历所有的图片容器,根据当前窗口宽度调整每个容器的宽度,从而影响到图片的大小...

    MFC运行时全屏显示,充满整个窗口

    而全屏显示则需要移除这些元素,使窗口占据屏幕的全部区域。 步骤一:创建MFC对话框应用程序 在VC6.0中,我们首先需要创建一个新的MFC对话框应用程序。这可以通过“文件”-&gt;“新建”-&gt;“项目”-&gt;“MFC AppWizard”...

    jquery实现的自适应图片高度满屏焦点图源码.zip

    【标题】"jquery实现的自适应图片高度满屏焦点图源码.zip" 是一个基于jQuery库的代码资源,主要用于创建一种自适应屏幕尺寸且图片高度能够充满整个屏幕的焦点图效果。焦点图,也称为幻灯片或轮播图,是一种在网页...

    Android实现滑动屏幕切换图片

    在这个例子中,使用了一个LinearLayout作为根布局,设置了宽度和高度为match_parent,确保布局充满整个屏幕。然后,添加了一个ImageView用于展示图片,其宽度和高度也被设置为match_parent。ImageView的id被设为"@+...

    Android中使用FrameLayout完成的图片浏览器项目的代码清单.pdf

    宽度和高度设置为`match_parent`,使得图片充满整个屏幕。 - 图片的初始源设置为`@drawable/pic01`,即第一张图片。同时,设置了`onClick`属性为`clickImage`,这意味着当用户点击这个ImageView时,会触发...

    JS动态可控制左右滚动的图片

    你可以使用媒体查询(`media queries`)或JS库(如Bootstrap)来适应不同的屏幕尺寸,保证图片在任何设备上都能正常滚动。 7. **兼容性处理**:虽然现代浏览器对JavaScript和CSS3的支持较好,但为了保证所有用户都能...

    瀑布流布局图片

    即只加载当前可视区域内的图片,当用户滚动到新内容时再加载更多的图片。这样可以减少首屏加载时间,提高用户体验。 5. **数据加载策略**:为了实现无尽滚动的效果,瀑布流布局通常采用分页加载或者无限滚动。当...

Global site tag (gtag.js) - Google Analytics