`
andrew1024
  • 浏览: 74235 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

利用CSS同比例缩小图片技巧

阅读更多
当然,生成缩略图这个工作如果交给程序来完成,效果会好很多,但是有时出于某种因素,例如服务器不支持GD之类的,难免就要请CSS代劳。

把一副大图片按比例缩小到某个尺寸,对于现代浏览器,直接使用max-width和max-height两条CSS属性即可。

对于IE 6.0及以下版本,以上两条CSS属性均不会被理会。之前处理这种事情,我们往往会借助Javascript,然后为图片加上onload事件。例如:

这固然能解决问题,但是对以后页面的升级会带来麻烦——随着浏览器对CSS支持的完善,我们迟早会把图片上的onload事件统统去除。该是 Expression的Show Time了,既然IE支持通过Expression在CSS中放置一些脚本,而这段脚本又只是提供给IE 6.0及以下版本使用,那么把它写到Expression中再合适不过。

最终,把一副大图片按比例缩小到50px*50px以内,可以参照以下这段CSS:



代码二:本人测试可用

.shopimg{
max-width:450px;
max-height:450px;
padding:0px;
margin:0;
}
*html .shopimg{
width:expression(this.width>450&&this.width>this.height?450:auto);
height:expression(this.height>450?450:auto);
}
分享到:
评论

相关推荐

    CSS纵向拉伸或随意放大缩小字体的宽高比例

    以下将详细介绍如何利用CSS来实现这个功能。 首先,我们要明白,常规情况下,CSS中的`font-size`属性用于设置文本的大小,而字体本身的宽度和高度比例(宽高比)是固定的,这使得文字在放大时会按比例缩放,不会...

    CSS完美解决前端图片变形问题的方法

    `object-fit`属性提供了多种填充方式,如`contain`(保持宽高比缩放,使图片完全包含在容器内),`fill`(不保持比例填充整个容器)等。需要注意的是,`object-fit`需要图片有明确的宽高设定才能生效,且在较旧版本...

    图片等比例缩放

    ### 图片等比例缩放——CSS技巧解析与应用 #### 一、问题背景与解决方案概述 在网页设计过程中,图片的尺寸控制对于保持页面布局的美观性和响应性至关重要。经常出现的问题是,当上传的图片尺寸过大时,可能会导致...

    CSS控制DIV里图片的宽度固定 而高度自动缩放比例.docx

    标题所提到的“CSS控制DIV里图片的宽度固定而高度自动缩放比例”就是一种常见的图像布局策略,它能够确保图像在宽度改变时,高度按照原图的比例自动调整,避免图像变形。 首先,我们要理解CSS中的盒模型,每个HTML...

    CSS限制图片大小

    为了保持图片的比例不变,可以利用`height:auto;` 来自动计算高度。这样即使宽度发生变化,图片的高度也会相应地进行缩放,从而避免失真。 #### 五、兼容性问题 值得注意的是,使用`expression`属性来动态设置图片...

    html css技巧

    5. CSS控制图片成比例缩放:使用`max-width: 100%;`和`height: auto;`组合可以让图片根据其容器自动缩放,保持原始宽高比。这样,图片不会超出其容器,同时保持比例。 6. CSS opacity-实现图片半透明效果:`opacity...

    CSS3实现的鼠标滑过图片放大缩小过渡特效源码.zip

    在"CSS3实现的鼠标滑过图片放大缩小过渡特效源码.zip"这个资源中,我们可以看到一个利用CSS3的过渡效果来实现图片在鼠标滑过时动态放大缩小的示例。 首先,我们需要了解CSS3中的过渡(Transition)。过渡是一种平滑...

    CSS3实现的鼠标移动到图片上不规则放大

    在现代网页设计中,增强用户体验的一个重要技巧是利用CSS3来实现各种动态效果。本案例主要探讨的是如何通过CSS3实现一种独特的交互效果——当鼠标移动到图片上时,图片会呈现波浪式不规则放大。这个效果可以吸引用户...

    Div CSS网站布局视频教程第4课_CSS设置图片效果

    6. **图片裁剪与覆盖**:利用`object-fit`属性,可以控制图片在容器内的填充方式,如`contain`(保持比例缩放以适应容器)、`cover`(填充整个容器并保持宽高比)等。此外,`overflow:hidden`可以隐藏超出容器部分的...

    HTML5结合JS不刷新网页单击缩放图片功能.rar

    在这个"HTML5_CSS3源码-图片特效"的示例中,可能还包含了一些CSS3的技巧,如使用CSS3选择器增强样式控制,或者利用`border-radius`创建圆角图片,提升视觉效果。同时,可能还运用了响应式设计,确保在不同设备上都能...

    使用css样式实现动态图片裁剪示例

    本示例将详细介绍如何利用CSS样式实现动态图片裁剪。 首先,我们来看一下给定的代码片段。这段HTML代码包含一个`div`元素,其class为"crop",内部嵌套了一个`img`元素。`div.crop`设置了一些关键的CSS属性,如`...

    <CSS强制图片自适应大小>

    另一种方法是直接将图片的`width`设置为`100%`,同时保持`height`为`auto`,这样可以确保图片的宽度始终与容器相同,同时保持图片的原始比例不变。 ```css img { width: 100%; height: auto; } ``` #### 三、...

    基于js实现的鼠标滚动图片等比例缩放效果源码.zip

    【标题】中的“基于js实现的鼠标滚动图片等比例缩放效果源码”是指一个JavaScript程序,它能够响应用户的鼠标滚动事件,动态调整网页中图片的大小,保持其原始比例不变,提供一种视觉上的平滑过渡效果。这种效果在...

    图片缩放demo-简单功能 图片缩放demo-简单功能

    2. CSS缩放:通过CSS,我们可以利用`max-width`和`max-height`属性限制图片的最大尺寸,或者使用`transform: scale()`函数来动态缩放图片。例如: ```css img { max-width: 100%; height: auto; } ``` 这将使图片...

    DivCSS网站布局视频教程第4课 CSS设置图片效果

    在本“DivCSS网站布局视频教程第4课 CSS设置图片效果”中,我们将深入探讨如何利用CSS(层叠样式表)来控制网页中的图像展示,从而实现丰富的视觉效果。CSS作为网页设计的核心技术之一,允许我们对网页元素进行精确...

    VMiddleImg图片居中裁切效果

    然后,"图片正比例"是为了防止图片在缩放过程中失真。保持图片的纵横比可以避免拉伸或压缩,这对于保持图片的视觉质量至关重要。在设置宽度或高度时,可以通过设置另一个维度为`auto`来自动计算并保持正比例。 在...

    jquery自动缩放渐变全屏背景图片代码下载.zip

    在这个“jquery自动缩放渐变全屏背景图片代码下载.zip”压缩包中,我们关注的是一个利用jQuery实现的特殊效果,即全屏背景图片的自动缩放和渐变效果。这个功能通常用于提升网站的视觉吸引力,尤其是在设计现代、简洁...

    imageen简单加载图片支持居中缩放

    此外,如果要确保图片始终填充整个容器,但又不失去比例,可以考虑使用CSS中的`background-size: cover`属性,或者在Imageen中实现类似的功能,通过计算合适的缩放比例和裁剪区域来达到目的。 总的来说,"Imageen...

    jquery+css实现世界地图放大缩小效果

    例如,使用`requestAnimationFrame`来同步动画与浏览器渲染,避免不必要的计算,以及利用CSS的`will-change`属性提示浏览器预先准备即将变化的属性。 通过以上步骤,我们可以创建一个交互式的、使用jQuery和CSS实现...

Global site tag (gtag.js) - Google Analytics