精华内容
下载资源
问答
  • 例如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页面成也图片,败也图片,

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

    展开全文
  • 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]; } 扩展...

    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]; } 扩展资料 for(var i = 0; i

    JS怎么更换img中src路径

    14d3b9b47fce384a77f3548cf51f429d.png

    JS代码:

    我写了一段示例代码,试过了可以用,你可以参考一下用法: document.getElementById('pic').src = "XXXXXXX";

    怎么用js修改src的值,img没有id和class

    代码:

    aa.gif

    先获取img对象,再比较img的src值,如: var imgs=divs.getElementsByTagName("img");for(var obj imgs){ if(obj.src=="/imgs/1.png"){ obj.src="/imgs/h.png"; }}因为没有img没有参考值。还有一个最笨的方法式给img加一个自定义属性x='1'。

    怎样用JS动态的改变img标签里面的src属性实现图片如题

    js:根据循环切换条件可以用document.getElementById("").src=""设置,或者juqery:("#id").attr("src","图片名称");

    img.setAttribute("src","你要修改为的路径名");

    JS怎么更换img中src路径$(ele).attr('src','1233.jpg');或$(ele).prop('src','1233.jpg'); prop要比attr好用。有几次attr没有效果,也可能是我的代码有问题。

    js 控制 img src

    我的img是循环出来的 如何用JS更换我点击的img的src 满意答案加分

    给IMG一个ID,JS里得到它的SRC属性,写个字符串连接不就好了 document.getElementById("id").src=变量;

    如何用js控制img中src图片路径改变

    下边是一列小图片(src图片路径是动态生成的)上边有一个div,鼠标移到 TestImgHtml function changeImg(url) { var bigimg = document.getElementById("myimg"); bigimg.src=url; } function changeBack() { var bigimg = document.getElementById("myimg"); bigimg.src=""; }

    用js的正则把img src替换成img data-original把img只改img里的,其他src不更改,麻烦写成js

    var str='y'; str=str.replace(/

    javascript控制更改img的src属性,怎么使得网页刷跟苹果首页的刷新效果一样

    展开全文
  • 例如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页面成也图片,败也图片,拉伸了图片就等着设计师的磨叽吧,哈哈哈哈...

    总结

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

    展开全文
  • 一、将图片作为dom元素方案1:给图片周围留白像这样,1:1的图片撑满图片区域,其他比例图片周围留白(粉~):如果图片高度大于宽度,则左右留白,高度小于宽度,上下留白实现代码:1body{margin: 0;background-color:...

    一、将图片作为dom元素

    方案1:给图片周围留白

    bVXsGC?w=440&h=225

    像这样,1:1的图片撑满图片区域,其他比例图片周围留白(粉~):如果图片高度大于宽度,则左右留白,高度小于宽度,上下留白

    实现代码:

    1

    body{

    margin: 0;

    background-color: #555;

    }

    #box {

    display: flex;

    justify-content: start;

    width: 500px;

    flex-wrap: wrap;

    margin: 20px auto;

    background-color: #555;

    }

    #box div {

    display: flex;

    justify-content: center;

    align-items: center;

    width: 100px;

    height: 100px;

    background-color: pink;

    margin-bottom: 5px;

    }

    #box div+div:not(:nth-child(5n)) {

    margin-left: 5px;

    }

    33.jpg
    avator.jpg
    he.jpg
    WechatIMG42.jpeg
    timg.jpeg

    // 注意:要在图片加载完之后才能获取到图片对象

    window.onload = function() {

    var box = document.getElementById("box");

    var imgs = box.getElementsByTagName('img');

    for (let i = 0; i < imgs.length; i++) {

    var w = imgs[i].offsetWidth,

    h = imgs[i].offsetHeight

    w > h ? imgs[i].style.width = '100%' : imgs[i].style.height = '100%'

    }

    }

    方案2:按所需尺寸截取图片中间部分,就像苹果相册的做法,不过这样会裁剪掉图片的一部分...hhhh,本来还想重写的,用的flex布局,然后发现上面代码只要改两个地方就能实现效果了:-D

    给css里面的#box div添加overflow:hidden;属性;

    将js里面w > h改成w < h;

    效果图如下:

    bVXsN1?w=451&h=224

    二、将图片作为背景图

    图片和上面一样的我就不贴了

    1

    body{

    margin: 0;

    background-color: #555;

    }

    #box {

    display: flex;

    justify-content: start;

    width: 500px;

    flex-wrap: wrap;

    margin: 20px auto;

    background-color: #555;

    }

    #box div {

    width: 100px;

    height: 100px;

    background-color: pink;

    margin-bottom: 5px;

    background-position: 50% 50%;

    background-size: contain;

    background-repeat: no-repeat;

    }

    #box div+div:not(:nth-child(5n)) {

    margin-left: 5px;

    }

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

    var imgs = ['33.jpg', 'avator.jpg', 'he.jpg', 'WechatIMG42.jpeg', 'timg.jpeg'];

    for(var i = 0; i < imgs.length; i++){

    var div = document.createElement("div");

    div.style.backgroundImage = `url(${imgs[i]})`

    box.appendChild(div, box)

    }

    这里其实只改变了#box div中background的部分样式,题主可以自己研究一下,上面的样式实现的是方案一,将#box div的background-size改为background-size: cover;就是方案二的效果咯

    展开全文
  • 记一次img标签图片不拉伸处理办法

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

    千次阅读 2015-05-25 18:11:05
    /** * 设置图片大小并且不拉伸 * @param ImgD * @param width * @param height * @constructor */function DrawImage(ImgD,width,height){ var image=new Image(); image.src=ImgD.src; if(image.width>0 && image....
  • 如果对象的高宽比匹配其框的宽高比,那么该对象将被拉伸以适应。contain被替换的内容将被缩放,以在填充元素的内容框时保持其宽高比。 整个对象在填充盒子的同时保留其长宽比,因此如果宽高比与框的宽高比匹配...
  • .box4 > div:nth-of-type(1) > img { width: 50%; display: block; height: 100%; object-fit: cover; } 加上 height: 100%; object-fit: cover;Ï
  • 一旦将图像的宽度设置为100%,这将指示浏览器使图像宽度与DIV的左右边缘齐平.然后,您通过CSS控制DIV的宽度,我发现将图像保留在块元素中可以在创建流体布局时更轻松地进行操作.例:img.stretchy {width: 100%; /*...
  • css img图片拉伸问题处理

    千次阅读 2020-12-24 17:47:17
    // An highlighted block img { display: block; width: 100%; //设置宽度,让height auto height: auto; margin-top: 2rem; }
  • 要求:每个选项等高(以最高为准) 选项中图片(图片高度一致)垂直居底部对齐 html &lt;div class='question'&gt; &lt;div class=option&gt; &lt;p&gt;选项一&lt;/p&gt; &lt;...
  • 第二次遇到这个问题了打算记下来 flex-shrink: 0
  • 图片不拉伸

    2019-11-26 15:40:46
    前一段时间重构了我们公司官网,在写首页轮播图片的时候,根据我的电脑屏,设置样式,没问题,到了笔记本后,发现由于高度没改变,宽度改变照成了图片拉伸 这个图片,在笔记本上的时候,图片上的文字会被拉伸,...
  • iOS设置图片拉伸不变形区域

    万次阅读 2017-06-29 21:36:27
    简单地设置确保图片部分区域拉伸
  • img{ object-fit:cover; }
  • 如题[img=https://forum.csdn.net/PointForum/ui/scripts/csdn/Plugin/003/onion/3.gif][/img]
  • Atitit img hot click link 图像背景拉伸100% Map area trouble.. So body backgrd img mode...is easy... Note,,,use relate witdh and height ... Margin left ,top etc... First ver layout,use ...
  • div className={styles.img_box} > <div className={styles.img} style={{backgroundImage: `url(${this.state.url})`}} /> </div> less 代码部分 .img_box{ width: 100%; height: 610px; .img{...
  • CSS图片不拉伸

    千次阅读 2019-10-09 14:41:27
    img { width: 80px; height: 80px; border-radius: 40px; object-fit: cover; }
  • 有个需求 用C# 发送邮件 到outlook 邮箱 设置的背景图片 无法拉伸平铺填充满 outlook 邮箱 貌似只有 body 标签 支持 background:url(cid:back)(要的效果是背景图片 所以 能用 img 标签) 这种写法 ![图片说明]...
  • img标签在div中拉伸显示

    千次阅读 2019-10-09 21:04:59
    img标签在div中拉伸显示 父级: div { width: 100%; padding-bottom:60%; //如果要正方形: /* width: 100%; padding-bottom:100%; */ position:relative; } 子级: img { height: 100%; position: absol.....
  • img标签实现background-size:cover(图片拉伸、缩放)等效果 img标签有一个object-fit属性,其值可以设置为cover、contain等和backgr-size也一样的值。 还有另外一个object-position属性可以设置位置,和background-...
  • 默认,保证保持原有的比例,内容拉伸填充整个内容容器。 contain 保持原有尺寸比例。内容被缩放。 cover 保持原有尺寸比例。但部分内容可能被剪切。 none 保留原有元素内容的长度和宽度,也就是说内容不会被...
  • [Android基础学习]ImageView 图片不拉伸

    千次阅读 2015-12-31 14:03:34
    要使ImageView图片不拉伸,两点: 1、ImageView的图片显示状态设为:android:scaleType="centerInside" 2、ImageView设置src而不是background,使用函数的话就是setImageResource而不是setBackgroundDrawable

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 12,369
精华内容 4,947
关键字:

设置img图片不拉伸