`
chenlb
  • 浏览: 696579 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
社区版块
存档分类
最新评论

页面内图像比例自适应

    博客分类:
  • HTML
阅读更多
     收集于网络,自已小改动下。
有DrawImage(ImgD, width, height) 调整图像比例的javascript函数。

<script language="javascript">
<!--

var flag=false;
function DrawImage(ImgD, width, height){
var image=new Image();
var iwidth = width;
var iheight = height;
image.src
=ImgD.src;
if(image.width>0 && image.height>0){
flag
=true;
if(image.width/image.height>= iwidth/iheight){
if(image.width>iwidth){
ImgD.width
=iwidth;
ImgD.height
=(image.height*iwidth)/image.width;
}
else{
ImgD.width
=image.width;
ImgD.height
=image.height;
}
ImgD.alt
=image.width+""+image.height;
}
else{
if(image.height>iheight){
ImgD.height
=iheight;
ImgD.width
=(image.width*iheight)/image.height;
}
else{
ImgD.width
=image.width;
ImgD.height
=image.height;
}
ImgD.alt
=image.width+""+image.height;
}
}
}
//-->
</script>
<style type="text/css">
.pic_size 
{border:1px solid #CCCCCC;width:240px;height:200px;margin-top:5px;background:#FFF;}
</style>
<div class="pic_size"><table width="100%" height="100%"><tr><td style="text-align: center;vertical-align: middle;"><img src="my.jpg" onload = "DrawImage(this,240,200)"></td></tr></table></div>
分享到:
评论

相关推荐

    页面自适应

    它允许容器内的子元素根据容器的大小变化进行伸缩,确保内容在不同设备上都能保持合适的比例。 4. **相对单位(Relative Units)**:在响应式设计中,使用相对单位如百分比、em或rem,代替绝对单位如像素,可以实现...

    图片尺寸自适应算法

    图片尺寸自适应算法的基础是对图像进行缩放。这通常通过改变图片的像素宽度和高度来实现。常见的缩放方法包括最近邻插值、双线性插值和更高级的插值技术如三次卷积插值,它们在放大或缩小图片时尽量保持原始图像的...

    自适应轮播网页全屏背景,根据窗口大小保持背景图片比例。

    标题中的“自适应轮播网页全屏背景”指的是一个能够自动调整大小,根据用户设备或浏览器窗口尺寸保持背景图片比例的网页元素。这种设计可以使网页在各种屏幕尺寸下都保持良好的视觉效果,避免图像因缩放而失真或变形...

    js图片自适应

    1. `object-fit`属性:CSS的`object-fit`属性可以控制图片在容器内的填充方式,如`contain`(保持宽高比缩放图像以适应容器)或`cover`(填充整个容器,可能裁剪部分图像)。 2. `max-width`:将图片的`max-width`...

    图片自适应兼容IE8完美就解决方案

    在网页设计中,图片自适应是一项重要的技术,它允许图片根据浏览器窗口的大小或设备的屏幕尺寸自动调整显示比例,确保用户体验的优化。对于IE8这样的老版本浏览器,由于其对现代CSS3属性的支持有限,实现图片自适应...

    页面自适应案例,适配pc端和移动端

    在网页设计领域,"页面自适应"是一种关键的技术,它使得网页能够根据用户使用的设备——无论是PC、平板还是智能手机——自动调整布局、尺寸和功能,提供良好的浏览体验。本案例聚焦于实现这样的自适应设计,确保在...

    div背景全屏自适应

    假设我们需要为一个登录页面设置全屏自适应的背景图像,可以按照以下步骤进行: 1. **准备素材**:选择一张高质量且具有代表性的图片作为背景。 2. **编写HTML结构**:创建一个包含背景图的`div`元素,并设置合适的...

    屏幕自适应资源包领取

    4. **可伸缩的图像和媒体**:为了在不同尺寸的屏幕上保持视觉效果,图像和媒体需要能够缩放。CSS的`max-width: 100%`属性可以确保图片不会超过其父容器的宽度,同时保持原始比例。 5. **视口单位**:视口单位如`vw`...

    html+css+个人博客自适应布局.zip

    例如, `, initial-scale=1"&gt;` 将确保页面宽度与设备宽度相匹配,并保持默认的缩放比例。 CSS(层叠样式表)则负责控制网页的外观和布局。在自适应设计中,CSS3引入了几种关键的技术,如媒体查询(Media Queries)...

    html5背景图片自适应代码.zip

    在背景图片自适应中,`cover`经常被用到,因为它会保持图像的宽高比例,并确保背景图像始终覆盖容器,至少在某一维度上完全填充。 - `background-position`: 它用于设定背景图像的位置,可以是像素值、百分比或其他...

    全屏自适应相册网页模板

    4. **响应式图片**:在全屏自适应相册模板中,图片的大小会随着屏幕尺寸变化而动态调整,以保持视觉比例和加载速度。这通常通过CSS3的`max-width: 100%`属性实现,或者利用HTML5的`srcset`和`sizes`属性来选择适合...

    网站自适应设计

    此外,可以使用CSS的object-fit属性控制图像在容器内的显示方式,保持比例缩放或填充整个容器。 5. **触摸友好的交互**: 自适应设计还考虑了触摸设备的用户界面,如增大按钮大小,增加点击区域,优化滑动和缩放...

    通栏自适应浏览器宽度的Banner幻灯片

    在IT行业中,网页设计是至关重要的一环,而Banner作为页面的核心元素之一,其设计与实现方式直接影响用户体验。本文将深入探讨“通栏自适应浏览器宽度的Banner幻灯片”这一主题,结合描述和标签,我们将重点讲解如何...

    关于自适应屏幕方向和大小的一些经验.doc.zip

    5. **图片自适应**: 对于图像,可以使用`max-width: 100%`属性确保其不会超出容器宽度,同时保持其原始比例。这样,无论屏幕大小如何,图片都能适应其容器。 6. **图标字体与SVG**: 使用图标字体(如Font Awesome)...

    手机网页自适应手机版

    综上所述,创建手机网页自适应手机版涉及多个方面,包括但不限于响应式设计原理、CSS媒体查询、流式布局、图像优化以及对触控操作的考虑。理解并掌握这些知识点,对于构建适应多设备的优质网页至关重要。

    Html5自适应模板1101-1200

    弹性图片可以保持图片相对于容器的比例,即使在缩放或旋转设备时也能保持正确显示。 在提供的文件名列表中,我们看到如H1168、H1105等命名的文件,这些很可能是每个HTML5模板的标识。每个模板可能包含HTML、CSS和...

    Html移动端自适应

    在移动设备上,使用rem可以使设计更加灵活,因为只需要改变根元素的字体大小,就可以统一调整整个页面的尺寸比例。rem.js是一个JavaScript库,它的主要作用是实现响应式设计,通过动态设置html元素的font-size,使得...

    CSS实现自适应的图片背景边框

    在网页设计中,图片背景边框是常见的元素,它可以增强页面的视觉效果,提供更丰富的设计感。然而,随着响应式网页设计的普及,如何让这些边框在不同设备和屏幕尺寸下都能自适应地展示变得至关重要。"CSS实现自适应的...

    手机屏幕自适应

    提取素材时需考虑到不同分辨率下的显示效果,避免在较小分辨率设备上出现图像失真。 3. **获取Widget显示区域大小**:在Widget加载时,获取当前设备的分辨率以及Widget的实际显示区域大小,这是实现等比缩放的前提...

    响应式自适应酒店设计室内装修网站.zip

    3. **自适应图像**:自适应图像通过HTML5的srcset属性或CSS的background-size属性实现,使得图像在不同设备上加载适当的尺寸,既节省了流量,也提高了加载速度。酒店网站中的高清图片,如室内设计方案和实际效果展示...

Global site tag (gtag.js) - Google Analytics