精华内容
下载资源
问答
  • css img图片拉伸问题处理

    千次阅读 2020-12-24 17:47:17
    // An highlighted block img { display: block; width: 100%; //设置宽度,让height auto height: auto; margin-top: 2rem; }
    // An highlighted block
     img {
          display: block;
          width: 100%; //设置宽度,让height auto 
          height: auto;
          margin-top: 2rem;
        }
    
    展开全文
  • 在web开发中,作为前端经常会遇到处理图片拉伸问题的情况。例如banner、图文列表、头像等所有和用户或客户自主操作图片上传的地方,而一旦牵扯图片,就会涉及到图片拉伸的问题,当然,在图片上传时做手动裁切,让...

    在web开发中,作为前端经常会遇到处理图片拉伸问题的情况。

    例如banner、图文列表、头像等所有和用户或客户自主操作图片上传的地方,

    而一旦牵扯图片,就会涉及到图片拉伸的问题,

    当然,在图片上传时做手动裁切,让用户或客户清晰的感知到图片的有效内容才是最优的解决方案,

    但是在其他各种外在因素下,没有做裁切的话,就需要在前端显示上做处理了,

    满足在上传任意大小图片的情况下,最优显示效果的需求。

    这时我们需要考虑到极端效果,如下图:

    bV0UVM?w=2544&h=773

    而我们想要得到的效果是这样的------

    bV0U5W?w=2544&h=773

    把图片放进框框,要几步?三步...我们开始

    第一步:先画个框框 (这里顺便安利一种自适应框框的方法)

    // 假定需要一个在750px屏幕下宽400px,高280px的盒子

    // 宽度 = 400 / 750 = 0.5333

    // 高度 = 280 / 400 * 0.5333 = 0.3733

    .img-box{

    position: relative;

    width: 53.33%;

    height: 0;

    padding-bottom: 37.33%;

    overflow: hidden;

    background-color: #eee;

    }

    ...

    第二步:设置图片需要使用到的css

    .width{

    position: absolute !important;

    width: 100% !important;

    min-height: 100% !important;

    top: 50% !important;

    transform: translateY(-50%) !important;

    -ms-transform: translateY(-50%) !important;

    -moz-transform: translateY(-50%) !important;

    -webkit-transform: translateY(-50%) !important;

    -o-transform: translateY(-50%) !important;

    display: block;

    }

    .height{

    position: absolute !important;

    height: 100% !important;

    min-width: 100% !important;

    left: 50% !important;

    transform: translateX(-50%) !important;

    -ms-transform: translateX(-50%) !important;

    -moz-transform: translateX(-50%) !important;

    -webkit-transform: translateX(-50%) !important;

    -o-transform: translateX(-50%) !important;

    display: block;

    }

    第三步:js获取图片高度比较并给img添加类名

    //需要注意的是,不能在css中直接给img设置宽度和高度

    //否则在img.onload后获取的宽高是css设置的宽高

    //同时建议使用dom对象来获取img标签

    var list = document.getElementById('list');

    getImgWH ( list );

    //执行宽高比对并设置img类名

    function getImgWH ( Obj ) {

    var img = Obj.getElementsByTagName('img');

    for( var i=0 ; i

    img[i].onload = function(){

    var width = this.width;

    var height = this.height;

    if ( width > height ) {

    this.classList.add('height');

    } else if ( width < height ) {

    this.classList.add('width');

    } else {

    this.style.width = '100%';

    this.style.height = '100%';

    }

    }

    }

    }

    图片防止拉伸处理比较简单,但是在实际项目中需要得到足够的重视,

    一个web页面成也图片,败也图片,

    拉伸了图片就等着设计师的磨叽吧,哈哈哈哈...

    展开全文
  • 前言相信大家在日常的web开发中,作为前端经常会遇到处理图片拉伸问题的情况。例如banner、图文列表、头像等所有和用户或客户自主操作图片上传的地方,而一旦牵扯图片,就会涉及到图片拉伸的问题,当然,在图片上传...

    前言

    相信大家在日常的web开发中,作为前端经常会遇到处理图片拉伸问题的情况。

    例如banner、图文列表、头像等所有和用户或客户自主操作图片上传的地方,而一旦牵扯图片,就会涉及到图片拉伸的问题,当然,在图片上传时做手动裁切,让用户或客户清晰的感知到图片的有效内容才是最优的解决方案,但是在其他各种外在因素下,没有做裁切的话,就需要在前端显示上做处理了,满足在上传任意大小图片的情况下,最优显示效果的需求。

    这时我们需要考虑到极端效果,如下图:

    63c5c3394bfc604bd12b62ac1097d0fe.png

    而我们想要得到的效果是这样的------

    9bbdb1744af22883130073debd1a899c.png

    把图片放进框框,要几步?三步...我们开始

    第一步:先画个框框 (这里顺便安利一种自适应框框的方法)

    // 假定需要一个在750px屏幕下宽400px,高280px的盒子

    // 宽度 = 400 / 750 = 0.5333

    // 高度 = 280 / 400 * 0.5333 = 0.3733

    .img-box{

    position: relative;

    width: 53.33%;

    height: 0;

    padding-bottom: 37.33%;

    overflow: hidden;

    background-color: #eee;

    }

    ...

    第二步:设置图片需要使用到的css

    .width{

    position: absolute !important;

    width: 100% !important;

    min-height: 100% !important;

    top: 50% !important;

    transform: translateY(-50%) !important;

    -ms-transform: translateY(-50%) !important;

    -moz-transform: translateY(-50%) !important;

    -webkit-transform: translateY(-50%) !important;

    -o-transform: translateY(-50%) !important;

    display: block;

    }

    .height{

    position: absolute !important;

    height: 100% !important;

    min-width: 100% !important;

    left: 50% !important;

    transform: translateX(-50%) !important;

    -ms-transform: translateX(-50%) !important;

    -moz-transform: translateX(-50%) !important;

    -webkit-transform: translateX(-50%) !important;

    -o-transform: translateX(-50%) !important;

    display: block;

    }

    第三步:js获取图片高度比较并给img添加类名

    //需要注意的是,不能在css中直接给img设置宽度和高度

    //否则在img.onload后获取的宽高是css设置的宽高

    //同时建议使用dom对象来获取img标签

    var list = document.getElementById('list');

    getImgWH ( list );

    //执行宽高比对并设置img类名

    function getImgWH ( Obj ) {

    var img = Obj.getElementsByTagName('img');

    for( var i=0 ; i

    img[i].onload = function(){

    var width = this.width;

    var height = this.height;

    if ( width > height ) {

    this.classList.add('height');

    } else if ( width < height ) {

    this.classList.add('width');

    } else {

    this.style.width = '100%';

    this.style.height = '100%';

    }

    }

    }

    }

    图片防止拉伸处理比较简单,但是在实际项目中需要得到足够的重视,一个web页面成也图片,败也图片,拉伸了图片就等着设计师的磨叽吧,哈哈哈哈...

    总结

    以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对脚本之家的支持。

    展开全文
  • 图片css添加object-fit属性,可用参数:object-fit属性由下列的值中选择一个关键字来指定。fill被替换的内容大小可以填充元素的内容框。 整个对象将完全填充此框。 如果对象的高宽比不匹配其框的宽高比,那么该...

    给图片css添加object-fit属性,可用参数:

    object-fit属性由下列的值中选择一个关键字来指定。

    fill

    被替换的内容大小可以填充元素的内容框。 整个对象将完全填充此框。 如果对象的高宽比不匹配其框的宽高比,那么该对象将被拉伸以适应。

    contain

    被替换的内容将被缩放,以在填充元素的内容框时保持其宽高比。 整个对象在填充盒子的同时保留其长宽比,因此如果宽高比与框的宽高比不匹配,该对象将被添加“黑边”。

    cover

    被替换的内容大小保持其宽高比,同时填充元素的整个内容框。 如果对象的宽高比与盒子的宽高比不匹配,该对象将被剪裁以适应。

    none

    被替换的内容尺寸不会被改变。

    scale-down

    内容的尺寸就像是指定了none或contain,取决于哪一个将导致更小的对象尺寸。

    建议使用cover、none或contain。

    酷炫pc及百搭pc模板在home.css的.pk-home-slider-1 img内添加object-fit: none即可。

    陕西,西安

    展开全文
  • javascript怎么动态更改img标签的src属性? var img_idx=0; var img_list=new Array("手机471.jpg","手机469.jpg"); function next_img(){ img_idx++; img_idx%=img_list.length; return img_list[img_idx]; } 扩展...
  • img标签实现background-size:cover(图片拉伸、缩放)等效果 img标签有一个object-fit属性,其值可以设置为cover、contain等和backgr-size也一样的值。 还有另外一个object-position属性可以设置位置,和background-...
  • 一、将图片作为dom元素方案1:给图片周围留白像这样,1:1的图片撑满图片区域,其他比例图片周围留白(粉~):如果图片高度大于宽度,则左右留白,高度小于宽度,上下留白实现代码:1body{margin: 0;background-color:...
  • 记一次img标签图片拉伸处理办法

    千次阅读 2020-10-13 17:07:07
    UI 画的盒子,固定宽高 242 * 162,里边有一张图片图片宽高不固定,但是图片不能拉伸,怎么展示没说 图片全部展示,不填充满,但是图片不能拉伸(最长边展示出来) 图片展示一部分,图片不能拉伸(最短边展示出来) ...
  • iOS图片拉伸技巧小结

    2021-01-20 09:10:45
    如对该图片拉伸,如何操作? 首先找到要拉伸的部分,很明显 两侧椭圆是不变 要拉伸的是中间部分,如何指定中间部位,先看下图 指定这4个宽度后 会形成黑色模块 直白点就是 这块内容就是拉伸后中间那块不断填充的...
  • 图片拉伸技巧

    2016-08-16 16:47:51
    如对该图片拉伸,如何操作? 首先找到要拉伸的部分,很明显 两侧椭圆是不变 要拉伸的是中间部分,如何指定中间部位,先看下图 指定这4个宽度后 会形成黑色模块 直白点就是 这块内容就是拉伸后中间那块不断填充...
  • 第二次遇到这个问题了打算记下来 flex-shrink: 0
  • 需求:人脸照片展示 说明:cs端上传图片,在web上展示。由于只对图片大小,格式进行判断,而无法控制图片形状。效果如下 ...img class="imgContent userMgrImg" :src="facePicPa...
  • 图片拉伸

    2018-12-25 14:26:00
    这个函数是UIImage的一个实例函数,它的功能是创建一个内容可拉伸,而边角不拉伸图片 leftCapWidth:左边不拉伸区域的宽度 topCapHeight:上面不拉伸的高度 根据设置的宽度和高度,将接下来的一个像素...
  • 要求:每个选项等高(以最高为准) 选项中图片(图片高度不一致)垂直居底部对齐 html &lt;div class='question'&gt; &lt;div class=option&gt; &lt;p&gt;选项一&lt;/p&gt; &lt;...
  • HTML图片拉伸

    千次阅读 2015-09-07 16:32:14
    图片拉伸方法 主要用在登录页的省事使用方法,一张背景图就可以解决,省掉搭建页面的繁琐,但个人也不知道这样搭建是否是好事,但也是一种方法。 本文参考文章地址: HTML中使背景图片自适应浏览器大小 html页面...
  • xcode UIImage图片拉伸

    2016-06-06 22:36:00
    图片拉伸 +(UIImage*)wlisWithImage:(NSString *)name{ //获取图片 UIImage * img=[UIImage imageNamed:name]; //获取图片宽 CGFloat imgW=img.size.width; //获取图片高 CGFloat imgH=img.size.height...
  • .box4 > div:nth-of-type(1) > img { width: 50%; display: block; height: 100%; object-fit: cover; } 加上 height: 100%; object-fit: cover;Ï
  • 图片拉伸放大效果

    2015-04-28 10:54:37
    图片拉伸的特效**好多应用实现了顶部图片拉伸放大的效果,在这里也实现一下简单的拉伸效果,并且更深刻的理解了UIEdgeInsets的参数(top,left,bottom,right); 拉伸效果关键代码如下: - (void)viewDidLoad { ...
  • 使用JavaScript解决网页图片拉伸问题

    千次阅读 2016-11-08 18:30:10
    开发网页的过程中经常会因为图片拉伸问题而苦恼,这里就将介绍如何通过JS来动态的处理网页图片尺寸的问题,让网页不再存在拉伸图片,让网站更加美观
  • 背景图片拉伸

    2014-07-14 13:53:40
    现在WEB页面设计比较流行使用...本文将带您一起使用jQuery和CSS实现背景图片拉伸效果。 查看演示DEMO 将背景图片拉伸,而不是平铺,注意平铺效果我们可以使用CSS的background-repeat来实行背景图片的平铺效果,本
  • ie 图片拉伸

    2019-07-05 17:46:00
    终于发现只要设置img为 height:auto,width:auto,就不会出现这种情况了 img { height: auto; width: auto; } 转载于:https://www.cnblogs.com/dehuachenyunfei/p/11139795.html
  • iOS 图片拉伸的多种方式

    千次阅读 2018-11-06 19:14:21
    ios图片拉伸   在开发过程中我们经常会遇到一些图片像素不够,需要拉伸放大来作显示,列如聊天背景框需要跟随内容而拉伸适应,但是如果直接改变图片宽高会使得图片变得模糊。所以我们就要来想办法保护一部分...
  • js 图片拉伸缩放,DIV拉伸

    千次阅读 2017-07-25 19:07:18
    .kx_border_img_stretch { position: absolute; top: 0; display: none; } /*四角*/ .kx_border_img_stretch .br { width: 20px; heig
  • 解决background图片拉伸问题
  • iOS 图片拉伸

    2016-08-15 15:28:00
    UIImage *img = [UIImage imageNamed:@"CGUnwrapRed_2"]; img = [img stretchableImageWithLeftCapWidth:floorf(img.size.width/2.0) topCapHeight:img.size.height/2]; 转载于:...
  • iOS 图片拉伸处理

    2016-07-27 10:34:21
    转自:http://www.jianshu.com/p/c9cbbdaa9b02最简单的设置方法: 设置好拉伸的方向后,图片就会自动按你的方式拉伸
  • IOS图片拉伸技巧

    2019-10-03 18:06:56
    IOS 图片拉伸技巧对于有些图标等按钮 在美工设计的按钮下可以通过拉伸效果处理所需效果,最熟悉的莫过于微信聊天的 椭圆背景,也是通过这个这个原理进行背景图片。如对该图片拉伸,如何操作? 首先找到要拉伸的部分...
  • IOS 图片拉伸技巧

    2016-08-12 13:16:18
     如对该图片拉伸,如何操作? 首先找到要拉伸的部分,很明显 两侧椭圆是不变 要拉伸的是中间部分,如何指定中间部位,先看下图 指定这4个宽度后 会形成黑色模块 直白点就是 这块内容就是拉伸后中间那块不断...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 11,423
精华内容 4,569
关键字:

img图片拉伸