img等比例缩放高度

2024-08-30

css img 等比例自动缩放

按父容器宽度自动缩放,并且保持图片原本的长宽比 img{ width: auto; height: auto; max-width: 100%; max-height: 100%; }

在做android图片加载的时候,由于手机屏幕受限,很多大图加载过来的时候,我们要求等比例缩放,比如按照固定的宽度,等比例缩放高度,使得图片的尺寸比例得到相应的缩放,但图片没有变形.显然按照android:scaleType不能实现,因为会有很多限制,所以必须要自己写算法. 通过Glide来缩放其实glide提供了这样的方法.具体是显示继承Transformation 的 setResource 方法. (1) 先获取网络或本地图片的宽高 (2) 获取需要的目标宽 (3) 按比例得到目标的高度

Android 使用Picasso加载网络图片等比例缩放

在做android图片加载的时候,由于手机屏幕受限,很多大图加载过来的时候,我们要求等比例缩放,比如按照固定的宽度,等比例缩放高度,使得图片的尺寸比例得到相应的缩放,但图片没有变形.显然按照android:scaleType不能实现,因为会有很多限制,所以必须要自己写算法. 通过Picasso来缩放其实picasso提供了这样的方法.具体是显示Transformation 的 transform 方法. (1) 先获取网络或本地图片的宽高 (2) 获取需要的目标宽 (3) 按比例得到目标的高度

JS等比例缩放图片,限定最大宽度和最大高度

JS等比例缩放图片,限定最大宽度和最大高度 JavaScript //图片按比例缩放 var flag=false; function DrawImage(ImgD,iwidth,iheight){ //参数(图片,允许的宽度,允许的高度) var image=new Image(); image.src=ImgD.src; if(image.width>0 && image.height>0){ flag=true; if(image.width/image.height&g

Android 设置ImageView宽度固定，其高度按比例缩放适应

今天和项目经理对喷了一下,他说在应用的列表数据中的图片应该宽度固定,高度按比例缩放自适应,我说,那岂不是很丑!直接让运营那边把图片处理成固定宽高比不就好了,省的我客户端麻烦了. 这家伙不同意,为毛呢,因为我们公司的图片尼玛全部是从别的网站上荡过来的,几万张图片,本身不知道图片宽度和高度....我日.... 好吧,既然提出了这么个需求,那我就实现呗,丑不丑就我就不管了... 我在群里问了些人有木有相关的实现,可惜没人鸟我,不知道是不是我问的太简单了还是没人会...于是乎网上搜了些相关的实现方式,还

Java控制图片按比例缩放- (注意内存释放)

package mytiny.com.common; import java.awt.Color;import java.awt.Graphics2D;import java.awt.Image;import java.awt.image.BufferedImage;import java.io.File; import javax.imageio.ImageIO; public class ImageZipUtil { public static void main(String[] args

理解CSS3中的background－size(对响应性图片等比例缩放)

理解CSS3中的background-size(对响应性图片等比例缩放) 阅读目录 background-size的基本属性给图片设置固定的宽度和高度的固定宽度400px和高度200px-使用background-size:400px 200px缩放设置固定宽度400px和高度200px-使用background-size:400px;的缩放设置,那么第二个参数会自动转换为auto 固定宽度400px和高度200px-使用background-size:100% 100%的缩放设置固定宽

jQuery实现等比例缩放大图片

在布局页面时,有时会遇到大图片将页面容器“撑破”的情况,尤其是加载外链图片(通常是通过采集的外站的图片).那么本文将为您讲述使用jQuery如何按比例缩放大图片,让大图片自适应页面布局. 通常我们处理缩略图是使用后台代码(PHP..net.Java等)根据大图片生成一定尺寸的缩略图,来供前台页面调用,当然也有使用前台javascript脚本将加载后的大图强行缩放,变成所谓的缩略图,这种方法不可取.但是,针对网站内容页,如本站文章详情页,如果需要加载一张很大的图片时,为了防止“撑破”布局,我们

实现web页面按比例缩放

对于web的掌握限于可以看懂别人的代码,并在框架中作相应修改或增加. 今天把另一个项目中的网页源代码粘过来做一个页面,结果问题百出. 首先,同样的代码,放在自己的项目里,页面排版错乱,看了下,引用的web框架版本不一致,只好硬着头皮自己改了,于是乎: 把网页设置的百分比改了个遍,终于调出看着还好的效果,心情一下明亮了起来.结果手贱缩放了下,页面又是一通乱,心情顿时等到了谷底.鉴于自己是一个比较追求完美的人,看着一个不顺眼的页面,怎么也不能就这样让他消失,毕竟这只是掩耳盗铃而已.然后,又不是一通改

jQuery实现等比例缩放大图片让大图片自适应页面布局

通常我们处理缩略图是使用后台代码(PHP..net.Java等)根据大图片生成一定尺寸的缩略图,来供前台页面调用,当然也有使用前台javascript脚本将加载后的大图强行缩放,变成所谓的缩略图,这种方法不可取.但是,针对网站内容页,如本站文章详情页,如果需要加载一张很大的图片时,为了防止"撑破"布局,我们使用jQuery来等比例缩放图片.我们分两种情况来讲述: 1.已知图片尺寸代码如下: <div id="demo1"> <img src=&

ImageButton如何让图片按比例缩放不被拉伸

了解在安卓的界面XML中,ImageButton有这样一个属性android:scaleType,他干嘛的? ImageView的Scaletype决定了图片在View上显示时的样子,如进行何种比例的缩放,及显示图片的整体还是部分.有八种类型即 1.center:图片位于视图中间,但不执行缩放.2.centerCrop按统一比例缩放图片(保持图片的尺寸比例)便于图片的两维(宽度和高度)等于或者大于相应的视图的维度3.centerInside按统一比例缩放图片(保持图片的尺寸比例)便于图片的两维

CSS3中的background－size(对响应性图片等比例缩放)

background-size的基本属性 background-size: 可以设定背景图像的尺寸,该属性是css3中的,在移动端使用的地方很多,比如最常见的地方在做响应性布局的时候,比如之前做的项目中有轮播图片,为了自适应不同大小分辨率的图片,我门需要使用css3中的媒体查询来针对不同的分辨率设置宽度和高度,虽然这种方式是可以解决问题,但是解决方式并不是太好,并且很繁琐,当然我门也想过直接使用百分比设置图片的大小,比如width(宽度): 100%,height(高度):100%; 但是设置图

PHP按最大宽高等比例缩放图片类

本来用phpthumb来缩略图片是十分方便的,但是最近在sae上写项目发现phpthumb在sae上保存文件时会出问题,想来实现一个简单的按最大宽高等比例缩放图片类也并不困难,于是便自己写了一个方便修改. 需GD库支持,可支持jpg.jpeg.png.gif格式的图片,代码短小适合新手学习用 <?php class slpic { //原图片文件,包含路径和文件名 var $orpic; //原图的临时图像 var $tempic; //缩略图 var $thpic; //原宽度 var $wi

CSS实现宽高成比例缩放

用js实现一个宽度自适应,高度随着宽度变化而变化的矩形,相信大家肯定都会.无非是js获取一下元素宽度,然后再计算出相应比例的高度,然后赋给元素,但如果要求只用CSS实现呢. html代码如下, <div class='container'> <div class='dummy'></div> <div class='content'>content</div> </div> css代码如下

JavaScript等比例缩放图片

js等比例缩放图片,这个功能非常实用,当网页加载一个尺寸比较大的图片时,往往会把一个网页撑的变形,页面变得很难看,于是我们就想到了用JS去控制超出一定范围的图片,以稳定页面布局,本代码段就是完成了此功能,而且代码非常简洁,效果很好. <html> <head> <title>等比例缩放图片</title> <script> function DrawImage(ImgD,iwidth,iheight){ //参数(图片,允许的宽度,允许的高度)

JS实现等比例缩放图片

JS实现等比例缩放图片 2014-01-19 21:57 by 龙恩0707, 40 阅读, 0 评论, 收藏, 编辑 JS实现等比例缩放图片有时候我们前端页面只有500×500像素的宽和高的布局,但是后台返回的数据图片是1000×1000,那么这种情况下如果我直接返回的话那么图片肯定有一部分没有显示出来,在这种情况下我是想能不能在我们前端开发实现图片等比例缩放.比如如下HTML代码: <div id="demo1"> <img src="http:/

css 布局之定位相对/绝对/成比例缩放

给body添加 overflow: hidden; 可以将页面所有的滚动条隐藏,但必须要给body 设置一个高度 overflow: hidden; height:864px; 父元素必须要设置 position:relative 必须设置 width 与 height 且不能用百分比父层如果是图片,要使用 background: url(bg.jpg) no-repeat; 子元素必须设置 position: absolute; 必须设置 wid

css中如何做到容器按比例缩放

需求: 一般在响应式中,我们会要求视频的宽高比为16:9或4:3,这么一来就比较头大了.当用户改变浏览器宽度的时候(改变高度不考虑),视频的宽度变了,那么高度也得根据我们要求的16:9或4:3改变. .wrap{ height: 0; padding-bottom: 56.25%; /* 16:9 */ position: relative; width: 100%; } .wrap .video{ position: absolute; left: 0; top: 0; width: 100%

Android 让图片等比例缩放的三种方法

方法一:客户端等比例前提条件:服务器端需要返回原始图片的“宽和高”或者“宽高缩放比例”,客户端要显示的图片的宽或者高只要其一是固定的(例如:高度为200,宽度未知,或者高度为400宽度未知) 在这种条件下客户端可以根据服务端返回的图片的宽高或者宽高比例计算出图片相对于屏幕的宽或者高.例如:缩放比例为:宽(图片原始宽度200px)/高(图片原始高度400px) = 0.5 .客户端定义要显示的宽度为100px,则根据缩放比例高度应该显示200px(100/0.5=200)图片才不会变形.andr

纯JS实现图片预览与等比例缩放和居中

最近做项目时有一个需求,广告位图片上传时要预览,并且要等比例缩放和居中.已经保存的广告位图片显示时也要等比例缩放和居中.我使用了下面的代码实现,不过可能有一些小问题. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title> Re

CSS让DIV按照背景图片的比例缩放，并让背景图片填充整个元素（转）

目的是:通过background的一系列属性,让DIV按照背景图片的比例缩放,并让背景图片填充整个DIV 首先我们需要让背景图片在指定的DIV中全部填充显示之前看有用类似 background-attachment: 的fix来实现背景图片的填充,但是,貌似是不能按照当前的DIV大小去填充. 我的情况是,宽度按照整个屏幕的百分比来调整,但是高度,又不能通过整个屏幕的高度百分比来调整,而也想通过宽度的百分比,即宽高比希望与背景图片的宽高比相等. 通过一下属性,先填充 background-siz