精华内容
下载资源
问答
  • 主要介绍了如何使用php等比例缩放图片,可以对原图片提出缩放要求的宽度、缩放的长度.
  • 主要介绍了php实现按指定大小等比缩放生成上传图片缩略图的方法,需要的朋友可以参考下
  • 首先,这里采用CSS3的方式,先设置父div的宽高,在对其中的img标签设置缩放比例。 下面是Div代码 <div class = "FuD"> <img src = "图片路径" class = "img"/> </div> 下面是CSS代码 .FuD{ width...

    首先,这里采用CSS3的方式,先设置父div的宽高,在对其中的img标签设置缩放比例。
    下面是Div代码

    <div class = "FuD">
    <img src = "图片路径" class = "img"/>
    </div>
    

    下面是CSS代码

    .FuD{
    width:500px;
    height:550px
    .img{
         transform: scale(0.5);  //缩小0.5
        -ms-transform: scale(0.5);
        -webkit-transform: scale(0.5);
        -o-transform: scale(0.5);
        -moz-transform: scale(0.5);
    }
    }
    

    下面我们看看效果图
    缩放前在这里插入图片描述
    缩放后效果
    缩放后

    是不是很简单呢!
    有问题的话,欢迎大家评论留言喔!

    展开全文
  • 在工作中经常需要对图片进行缩放,但有些缩放会让图片变形,所以今天就给大家介绍**CSS如何实现图片比例缩放不变形,**正在学习CSS的小伙伴赶紧过来看看吧! 下面一段代码给大家介绍CSS实现图片比例缩小不变形 ...

    在工作中经常需要对图片进行缩放,但有些缩放会让图片变形,所以今天就给大家介绍**CSS如何实现图片等比例缩放不变形,**正在学习CSS的小伙伴赶紧过来看看吧!

    下面一段代码给大家介绍CSS实现图片等比例缩小不变形 ,具体代码如下所示:

    > <img src="../images/bg1.jpg"alt=""/>
    > 
    >       img {
    > 
    >            /*等宽缩小不变形*/
    > 
    >            /*width: 100%;*/
    > 
    >            /*二选一*/
    > 
    >            /*等高缩小不变形*/
    > 
    >            height: 100%;
    > 
    >        }
    
    

    补充:CSS控制图片大小不变形

    方法一、(不错,我正在用)

    > img {max-width:630px;myimg:expression_r(onload=function(){this.style.width=(this.offsetWidth > 630)?"630px":"auto"});}
    
    

    设置最大宽度是630px 如果大于630就把图片宽度设置为630 高度就会随着比例也会缩小 不会造成图片变形

    方法二

    
    > img,a img{
    > 
    > border:0;
    > 
    > margin:0;
    > 
    > padding:0;
    > 
    > max-width:590px;
    > 
    > width:e-xpression(this.width>590?"590px":this.width);
    > 
    > max-height:590px;
    > 
    > height:e-xpression(this.height>590?"590px":this.height);
    > 
    > }
    

    方法三

    > div img {
    > 
    > max-width:600px;
    > 
    > width:600px;
    > 
    > width:expression(document.body.clientWidth>600?”600px”:”auto”);
    > 
    > overflow:hidden;
    > 
    > }
    
    

    max-width:600px; 在IE7、FF等其他非IE浏览器下最大宽度为600px。但在IE6中无效。

    width:600px; 在所有浏览器中图片的大小为600px;

    当图片大小大于600px,自动缩小为600px。在IE6中有效。

    overflow:hidden; 超出的部分隐藏,避免控制图片大小失败而引起的撑开变形。

    如果想设定图片的高度和宽度都不超过某一个固定值,就需要在图片高度或宽度超过这个值的时候,让图片按比例缩小到这个尺寸。

    (1)对于现代浏览器,比如Firefox或是IE7及以上,直接使用max-width和max-height两条CSS属性即可。

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

    > <imgsrc="..."alt="..."onload="resizeImage(this)"/>
    > 
    > <script type="text/javascript">
    > 
    >   functionresizeImage(obj){
    > 
    >   obj.width=obj.width>50&&obj.width>obj.height?50:auto;
    > 
    >   obj.height=obj.height>50?50:auto;
    > 
    >   }
    > 
    > </script>
    
    

    总结:以上所述是给大家介绍的CSS实现图片等比例缩小不变形的实例代码,希望对大家有所帮助

    专门建立的学习Q-q-u-n ⑦⑧④-⑦⑧③-零①② 分享学习方法和需要注意的小细节,互相交流学习,不停更新最新的教程和学习技巧(网页制作,网站开发,web开发,从0基础开始的的HTML+CSS+JavaScript。jQuery,Ajax,node,angular框架等到移动端HTML5的项目实战【视频+工具+系统路线图】全栈工程师学习路线以及规划都有整理,分享给小伙伴)点:学习前端,我们是认真的

    展开全文
  • 其中插入的图片的代码为: folat PictLeft,PictTop; Rane rng = mySheet.getRange("A1","B2");...不知道如保设置属性使图片比例缩放....或者得到怎样得到原图的 宽 与高...? 如果得到原图片的宽与高就好解决了...
  • 了解 在安卓的界面XML中,ImageButton有这样一个属性android:scaleType,他干嘛的? ImageView的Scaletype决定了图片...2、centerCrop按统一比例缩放图片(保持图片的尺寸比例)便于图片的两维(宽度和高度)等于...

    了解

    在安卓的界面XML中,ImageButton有这样一个属性android:scaleType,他干嘛的?

    ImageView的Scaletype决定了图片在View上显示时的样子,如进行何种比例的缩放,及显示图片的整体还是部分。有八种类型即

    1、center:图片位于视图中间,但不执行缩放。
    2、centerCrop按统一比例缩放图片(保持图片的尺寸比例)便于图片的两维(宽度和高度)等于或者大于相应的视图的维度
    3、centerInside按统一比例缩放图片(保持图片的尺寸比例)便于图片的两维(宽度和高度)等于或者小于相应的视图的维度
    4、fitCenter缩放图片使用center,在中间
    5、fitEnd缩放图片使用END,靠近尾部
    6、fitStart缩放图片使用START,靠近头部
    7、fitXY缩放图片使用XY
    8、matrix当绘制时使用图片矩阵缩放

    相应的java代码为 imageButton.setScaleType(ImageView.ScaleType.FIT_CENTER);

    在这里我们选择fitCenter缩放图片使用center

     

    实施

    我们想要实现的效果是一个按钮点击下去可以显示点击的效果,即另外一张图片。结合onTouchListener就可以实现,不过有个地方要注意一下。

       1:  public class Example extends Activity {
       2:  ImageButton exm;
       3:   
       4:  public void onCreate(Bundle savedInstanceState) {
       5:          super.onCreate(savedInstanceState);
       6:          setContentView(R.exampleLayout);
       7:          exm = (ImageButton)findViewById(R.id.exmBtn);
       8:          initBtnListener(exm);
       9:  }
      10:   
      11:  private void initBtnListener(ImageButton btn){
      12:         btn.setOnTouchListener(new  View.OnTouchListener(){
      13:          @Override
      14:          public boolean onTouch(View v, MotionEvent event) {
      15:              if(event.getAction() == MotionEvent.ACTION_DOWN){
      16:                  //更改为按下时的背景图片
      17:                  exm.setImageResource(R.drawable.anwbtn1);
      18:              }else if(event.getAction() == MotionEvent.ACTION_UP){
      19:                  //改为抬起时的图片
      20:                 exm.setImageResource(R.drawable.anwbtn0);
      21:              }
      22:              return false;
      23:              }
      24:          });
      25:      }
      26:   
      27:  };

    在exampleLayout的XML中有一个id为exmBtn的ImageButton,并且设置属性android:scaleType=“fitCenter”

    上面中更改按钮图片的方法还有另外一种就是v.setBackgroundResource(int);但是这种方法达不到让ImageButton自己管理图片缩放的效果,所以应该直接让ImageButton自己setImageResource。

    注意上面的代码中使用到了内部类,其实上面的用法参数btn确实是指向exm,但是不能用btn代替exm去更换按钮图片,原因是btn必须声明为final才能在匿名内部类View.OnTouchListener()中使用。所以可以把btn参数直接替换成exm并把形式参数去掉。

    360软件小助手截图20140321034532360软件小助手截图20140321034550

    转载于:https://www.cnblogs.com/claruarius/p/fitCenter.html

    展开全文
  • 如何图片比例响应式缩放、并自动裁剪的css技巧同时也适用于一些轮播父容器响应式缩放响应式网站、移动端页面在DIV CSS布局中对于图片列表或图片排版时, 如果想要图片比例缩放, 最简单的就是把img宽度设为...

    如何让图片按比例响应式缩放、并自动裁剪的css技巧

    同时也适用于一些轮播父容器响应式缩放

    响应式网站、移动端页面在DIV CSS布局中对于图片列表或图片排版时,
    如果想要图片按比例缩放,
    最简单的就是把img宽度设为100%,
    不设置高度,高度就会自动跟着高度缩放

    但是如果要达到的效果是,要让图片的宽高要按一定的比例显示,如1:1 、4:3 等,
    然而图片尺寸不是这个比例,又不想让图片拉伸变形,自动裁剪掉两边多余部分、这该如何解决呢?


    首先,今天准备了四张宽高各不相同的素材,如下图所示:
    这里写图片描述


    先展示一下最终效果:
    (注意这里的裁剪是以中间为基点,裁剪的是上下或左右两边)

    (宽高1:1):

    这里写图片描述

    (宽高4:3):
    这里写图片描述

    (宽高3:4):
    这里写图片描述


    实现样式

    html部分:

    <div class="zoomImage" style="background-image:url(images/test1.jpg)"></div>

    css部分:

    .zoomImage{
        width:100%;
        height:0;
        padding-bottom: 100%;
        overflow:hidden;
        background-position: center center;
        background-repeat: no-repeat;
        -webkit-background-size:cover;
        -moz-background-size:cover;
        background-size:cover;
    }

    原理剖析

    width:100%;
    height:0;
    padding-bottom: 100%;
    overflow:hidden;

    样式中的上面四句主要目的是为了让这个div以1:1的大小呈现,
    虽然height:0;高度为0,但是它的padding值为100%
    这是因为在padding为百分比的时候,是根据他父层的宽度来进行计算的。
    在一点MDN关于padding的文档 也有说到,有兴趣的同学可以看看。

    background-position: center center;
    background-repeat: no-repeat;
    -webkit-background-size:cover;
    -moz-background-size:cover;
    background-size:cover;

    后面5句就是利用了css3中的 background-size:cover 的特性,把背景图像扩展至足够大,以使背景图像完全覆盖背景区域。


    对于padding为百分比的时候,我画了一张图,希望有助于大家理解:
    这里写图片描述

    总结:就是你所需要的比例,就是width与padding-bottom的比例
    用的时候,直接把.zoomImage当成img标签来用就可以了。


    关于扩展到响应式轮播:

    在这里我拿swiper轮播图插件举例:
    这个插件是目前应用较广泛的移动端网页触摸内容滑动js插件,balabala…

    这个插件本来就是响应式的没错,
    但有两个问题:
    1、这个轮播图你必须要给他一个高度,但高度不是固定死的,是需要按比例的,
    (除了用js,或者每个分辨率用媒体查询设置一下高度/这个简直不要太繁琐)
    所以我们还可以用刚刚上面的padding方法,让它成为一个可以按比例缩放的容器
    2、轮播图里的图片不是需要的比例怎么办(又回到这个问题上来了,现在知道该怎么做了吧)

    优化前:

    这里写图片描述

    优化后:

    这里写图片描述

    就可以变成一个:不用根据图片尺寸,都可以根据比例自适应的轮播图啦。


    关于兼容性:

    这个样式里有利用到CSS3的属性: background-size:cover;
    那当我们做响应式、移动端的页面时,肯定也要用到CSS3的媒体查询或者其他的CSS3样式,而且移动端的浏览器对CSS3的支持性比较好,所以这一点应该是不用担心的。

    展开全文
  • 这个时候如果使用CSS固定死图片大小(宽度 高度),这个时候如果图片相对于这个位置不是等比例大小,那么这张图片就会变形,让图片变得不清晰,这个时候想让图片不变形又按比例缩放如何解决?CSS图
  • 图片的大小如何根据容器的大小进行比例缩放呢。以下是一个比较简单的函数,根据图片的宽高比例进行计算,缩放后保持比例不变。(转自 faib) //ViewSize外框大小//ImageSize图片的实际大小publicSizeResize(Si...
  • Tips:本文主要介绍CSS3的background-size属性,实现响应式式图片比例缩放。 (一)基本语法 基本语法:background-size: length | percentage | cover | contain; (可参照w3c的为准) length 该属性值是...
  • ---------------------原始代码-------------------------------"http://www.w3.org/TR/html4/loose.dtd">无标题文档 function show() { var w,h; var k; var con; w=smallslot.width; h=smallslot.height;...
  • 给img添加 object-fit属性 <div> <img src=" " /> </div>... //剪切图片,保留原始比例 } object-fit属性所有的值 object-fit: fill|contain|cover|scale-down|none|initial|inherit;
  • 手机上传的拍照图片都是非常大,基本都是几兆以上,对于应用存储来说,非常这个图片功能就非常占用磁盘空间,而且在上传下载时,也占用太多的网络资源,但遇到这种情况时,就需要进入图片等比率进行缩放,把图片压缩...
  • 如果图片本身没有设置 width、height属性的话,只需要修改  max-width:100%; 就可以了 如果图片本身设置了 width、height属性的话,需要同时修改width 和height 两种属性, 我的解决办法如下 <style> ...
  • [前端]如何图片比例缩放,同时撑满父级容器的长或宽 最近碰到一个问题,如何在一个容器里同时放一张图片,而这张图片会等比例缩放,长或宽会跟着父级容器的长或宽一致。 找了一段时间,发现了 css3 中有这个属性...
  • python版本为2.7 32位其他版本信息如下图运行结果如下:目前想实现的功能就是将图片能先按照当前屏幕的尺寸缩放,在全屏显示在界面中,因为后续还需要在图片上画直线并获取直线两点的色彩信息,所以采用了opencv的...
  • <div class="bg_picWrapper" :style="{backgroundImage:'url('+img+')'}">------------vue中动态绑定背景图片显示的方式  <... 在项目中我们经常会跟图片打交道,遇到显示图片的需求,...
  • 这个时候如果使用CSS固定死图片大小(宽度 高度),这个时候如果图片相对于这个位置不是等比例大小,那么这张图片就会变形,让图片变的不清晰,这个时候想让图片不变形又按比例缩放如何解决?CSS图片
  • 响应式网站、移动端页面在DIV CSS布局中对于图片列表或图片排版时,如果想要图片比例缩放,最简单的就是把img宽度设为100%,不设置高度,高度就会自动跟着高度缩放 但是如果要达到的效果是,要让图片的宽高要按...
  • python中如何控制GUI界面等比例缩放root = Tk() # 创建 GUI 主程序 root.geometry('800x800+0+0')#设置界面欢迎来到四十五资源网: 你可以使用网格布局; 或者是利用百分比设置现实的大小;python中image怎样缩小...

空空如也

空空如也

1 2 3 4 5 ... 17
收藏数 323
精华内容 129
关键字:

如何缩放图片比例