精华内容
下载资源
问答
  • 前言:我们前端显示图片缩略图的时候,会遇到清楚图片的尺寸,然后使用固定高宽比的img来显示图片,这样会导致高宽比一致的图片会被挤压拉伸。本文站以前端小白的视角来探讨这种问题的解决方案。 方案一 ...

    前言:我们在前端显示图片缩略图的时候,会遇到不清楚图片的尺寸,然后使用固定高宽比的img来显示图片,这样会导致高宽比不一致的图片会被挤压拉伸。本文站以前端小白的视角来探讨这种问题的解决方案。

    方案一 max-width和max-height

    使用max-width和max-height来做,这种情况下不能保证每一张图片预览都是相同宽高的,但是却不会挤压拉伸图片。

    如下图,二、三张图片的宽高一致,没什么问题,一、四、五、六张图片明显被挤压或者拉伸。
    这里写图片描述

    样式:

    img {
        width: 450px;
        height: 450px;
    }
    
    <img src="timg.jpg"/>
    <img src="timg%20(1).jpg"/>
    <img src="timg%20(2).jpg"/>
    <img src="timg%20(3).jpg"/>
    <img src="timg%20(4).jpg"/>
    <img src="timg%20(5).jpg"/>
    

    修改成max-width和max-height之后的效果:
    这里写图片描述
    样式:

    img {
        max-width: 450px;
        max-height: 450px;
    }
    

    三张图片的显示比较正常了,但是高度没有达到450px,但是保留了完整图片的预览,这种方式是比较简单的解决方法,如果想要一致的宽高,那么就需要裁剪图片了。下面的几种方案都是涉及裁剪的方案。

    下面的三种方案以下图为例:
    这里写图片描述

    方案二 使用background-size属性的cover值或者contain

    <div class="container"></div>​
    
    .container {
        width: 150px;
        height: 100px;
        background-image: url("http://i.stack.imgur.com/2OrtT.jpg");
        background-size: cover;
        background-repeat: no-repeat;
        background-position: 50% 50%;
    }
    
    .container {
        width: 150px;
        height: 100px;
        background-image: url("http://i.stack.imgur.com/2OrtT.jpg");
        background-size: contain;
        background-repeat: no-repeat;
        background-position: 50% 50%;
    }
    

    按照单词的字面意思:

    • cover 把背景图像扩展至足够大,以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。
    • contain 把图像图像扩展至最大尺寸,以使其宽度和高度完全适应内容区域。 这种方式类似与第一种实现。​

    cover实现效果:
    这里写图片描述

    contain实现效果:
    这里写图片描述

    方案三 使用CSS3的object-fit属性

    <img src="http://i.stack.imgur.com/2OrtT.jpg" class="cover" width="242" height="363" />
    
    .cover {
      object-fit: cover; // contain
      width: 50px;
      height: 100px;
    }
    

    object-fit CSS 属性指定替换元素的内容应该如何适应到其使用的高度和宽度确定的框。
    这个属性的值有以下几种:

    • fill:被替换的内容大小可以填充元素的内容框。 整个对象将完全填充此框。 如果对象的高宽比不匹配其框的宽高比,那么该对象将被拉伸以适应。相当于固定宽高下未做任何调整的样式。

    • contain:被替换的内容将被缩放,以在填充元素的内容框时保持其宽高比。 整个对象在填充盒子的同时保留其长宽比,因此如果宽高比与框的宽高比不匹配,该对象将被添加“黑边”。和backgroud-size属性的contain类似,只是多了黑边。

    • cover:被替换的内容大小保持其宽高比,同时填充元素的整个内容框。 如果对象的宽高比与盒子的宽高比不匹配,该对象将被剪裁以适应。和background-size属性的cover类似。

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

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

    object-fit: cover的效果:
    这里写图片描述

    object-fit: contain的效果:
    这里写图片描述

    方案四 container包裹,设置overflow:hidden

    <div class="container"><img src="http://i.stack.imgur.com/2OrtT.jpg" /></div>
    .container {
        width: 300px;
        height: 200px;
        display: block;
        position: relative;
        overflow: hidden;
    }
    
    .container img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
    }
    

    居中图片(jQuery):

    var conHeight = $(".container").height();
    var imgHeight = $(".container img").height();
    var gap = (imgHeight - conHeight) / 2;
    $(".container img").css("margin-top", -gap);
    

    效果:
    这里写图片描述

    方案五 懒人必备 jqthumb库

    功能比较丰富,使用简单,详见jqthumb

    能够实现的效果:
    这里写图片描述

    展开全文
  • 服务端的图片更新之后,前端的图片没有更新? 这是因为浏览器首次读取服务端的图片之后,再次读取同名图片,会直接从临时文件中读取,不再请求服务端。如果清除浏览器缓存,则图片更新。 可以修改图片名,或者给...

    在服务端的图片更新之后,前端的图片没有更新?

    这是因为浏览器首次读取服务端的图片之后,再次读取同名图片,会直接从临时文件中读取,不再请求服务端。如果清除浏览器缓存,则图片更新。

    可以修改图片名,或者给图片加上版本号。

    var version = Math.random();
    
    <img src="./test.png?"+version />

     

    展开全文
  • 移动端页面ios中图片不显示

    万次阅读 2017-09-07 15:39:17
    移动端开发中,有的时候可能遇到这样的问题,我从别人网站上下载下来的图片,然后做出H5页面,但是浏览器中和android中都显示正常,可是一到ios中图片显示了,这个时候就需要注意了,可能是图片的格式问题...

    在移动端开发中,有的时候可能遇到这样的问题,我从别人网站上下载下来的图片,然后做出H5页面,但是在浏览器中和android中都显示正常,可是一到ios中图片就不显示了,这个时候就需要注意了,可能是图片的格式问题导致ios中不认识,比如我从网上下载的图片保存到电脑中不能预览的图片就是这种。


    在计算机中打开预览图片显示如下:


    这样的图片在ios中就不显示,解决办法很简单,就是在下载的时候去掉后面的类型就可以了,



    展开全文
  • 使用Tomcat作为服务器的时候,如果配置图片保存路径,将图片保存项目路径下,那么再次打war包发布项目可能会造成图片的丢失,每次重启前将图片先保存再copy到服务器明显方便,这时可以配置图片保存位置,将...

    使用Tomcat作为服务器的时候,如果不配置图片保存路径,将图片保存在项目路径下,那么再次打war包发布项目可能会造成图片的丢失,每次重启前将图片先保存再copy到服务器明显不方便,这时可以配置图片保存位置,将图片保存到项目外的地方,方法如下: 

    打开tomcat - conf下的server.xml文件,在Host节点下添加

    <Context  docBase="G:/upload/images"  path="/images" />


    docBase为图片保存的位置,path为图片的访问路径。

    例如:上传了一张test.jpg的图片到服务器,



    访问路径是 http://localhost/images/test.jpg



    这样不仅解决了图片保存问题,同时还能保证服务器的安全。

    展开全文
  • Glide Android 9.0上显示图片

    千次阅读 2018-11-30 15:44:52
    Glide Android 9.0上显示图片 问题:将项目的targetSdkVersion改为28后 ,Glide 加载图片 解决: 从Android 6.0开始引入了对Https的支持,但是Android P的系统上面所有Http的请求都被默认阻止了 会报出...
  • 之前做项目遇到一个问题,IE(IE8-11)上测试兼容性的时候发现部分图片不显示,也报错,chrome、Firefox、Opera上都是正常的。 检查了很久的代码,图片路径什么的,但是如果路径不对应该不止IE上显示,...
  • win10系统中遇到文件夹里的缩略图,显示内容,这样很方便查看。如图:调出可以预览图片的方法如下:此电脑--右键属性--高级系统设置--视觉效果--勾上--显示缩略图,而不是显示图标
  • 背景图片不重复平铺,可以这样设定背景: 1、&lt;body style="...2、使图任何大小的屏幕都不会显示重复,可以这样设定背景(图像平铺): &lt;body style="backgrou...
  • 微信JSSDK的文档上面拍照和相册选择图片这个API的文档上写着可以通过给img标签设置获取到的localid实现图片预览。测试之后发现安卓中可以正常显示而IOS中图片无法正常显示。通过搜集资料后发现问题出微信的...
  • word文档中插入的图片显示...但是我又想让改变文章整体的行距,于是我就在图片前后各加一行,全选上,设置这个区域的间距为单倍行距就好了。 因为只有图片是能设置段落的,如果想要这两行,设置完再删掉就好了。
  • Glide--listview中加载高度固定图片,加载刷新图片跳动 项目中用了Glide来显示高度固定的图片,加载更多调用notifyDataSetChanged这个方法时候,图片已加载过得会闪烁一下, 但是又测试了,Glide显示高度...
  • 使用hammer.js如何做到图片在拖动及放大拖动时图片的边界不在视图之内
  • html插入图片网页显示出来

    万次阅读 2016-06-09 20:38:03
    今天学习html的几个标签,当用来插入图片,可是发现网页总是显示出来。后来发现是路径的问题。原来我把.html文件和所要插入的图片放在一个文件夹,这时候scr后面的路径应该填写相对路径才行,则只要写图片的名称...
  • Visio复制的图片在Word中显示

    万次阅读 2018-03-24 17:41:28
    写论文之际,碰上了Visio画的图突然Word里面显示了,之前都好好的,网上找了很多方法都靠谱,一度怀疑受到病毒入侵word崩溃了,最后找到了解决办法。首先,确保插入的是嵌入式格式。保证段落-行间距是单倍...
  • VS中OpenCV用imread读取图片

    千次阅读 2017-09-27 19:01:25
    今天Visual Studio2013中配置好了OpenCV2.4.11,然后用imread读取图片试试效果,发现读取图片,症状是,编译运行都没出错,但是读到的图片就是空的。最后查找了半天的原因,发现是工程使用的是Debug模式,但是...
  • 微信小程序 图片在真机显示跳坑总结

    万次阅读 热门讨论 2017-10-16 10:30:55
    进行微信小程序开发时开发工具自带的模拟器可以正常显示,但是!手机上面体验版查看居然没有图片!!! 经过网上搜索以及自己摸索总结出一下解决方案:   1.图片是用image加载的; 2.图片的url里面没有中文...
  • 进行小程序开发的时候,突然发现一个如此诡异的问题:小程序本地图片在编辑器上能显示,手机上显示?带着这个问题可能和大家解决问的步骤一样,先惊讶一番、然后去网上找各种帖子,发现压根没有说到正点上,纯属...
  • 在界面分布中,li标签里,如何让图片跟字体不在同一行,也就是上下行的结构。看如下解决方法 加个样式 class="k_img_ul" ,字体用 标签围着。    员工查询  往来单位   css里面...
  • 如何让背景图片不重复填充div中

    千次阅读 2017-03-16 10:10:47
    1.使用background,能改变图片的大小,只能直接放进去; 2.用img标签可以做到填充: ,div设好了width和height,img给...定义一个层在图片上,这里要用到定位——position .divdemo{position: relati
  • 如下是我的代码,PHP项目部署Linux服务器中,权限已经提高到777,情况是这样的,第一次加载可以显示图片,F5刷新页面,图片一闪就显示了,用火狐调试,发现可以加载进来,直接访问路径也OK,清楚是什么原因,...
  • 我们给一个登陆页面添加一个背景图的时候,为什么我们明明添加了。 ...这种情况,建议各位程序员,将本html和图片放在一个文件夹下面 这样就不会造成加载上的情况。 希望对大家有帮助!!...
  • 最近学习微信小程序开发,刚写完一个测试页面拿起手机体验的时候bug就出现了,心里苦~ 出现个很奇怪的问题,页面的图片在开发者工具中明明是可以显示的,但到了真机中却不见了,检查过图片src路径,貌似也没写错吖...
  • 解决github图片不显示问题

    万次阅读 多人点赞 2019-11-05 14:44:24
    今天github上查阅资料,但是页面的图片不显示 解决方法,打开路径C:\Windows\System32\drivers\etc下的hosts文件 最后加上 # GitHub Start 192.30.253.112 github.com 192.30.253.119 gist.github.com 151...
  • 因为要做页面间的跳转,我做的每个页面就是一个.py文件,这个py文件里包含了一个这个页面所属的类,所以我是类里调用了上述文章中的方法,但是这时候图片不显示,但是上面的按钮会显示。 刚开始我以为是pack的...
  • layer UI 弹出的窗口下如何查看图片时,图片不受窗口的限制,能遮盖窗口, 全屏显示。目前遇到的问题是查看图片图片只是窗口的范围下面看,这样 图片全,符合设计要求
  • 局域网jsp部署tomvat上,手机上能显示页面,但就是显示了JSP页面中的图片,这是什么原因啊?要怎么解决呢?
  • 老遇到jpg图片在ie中能显示,以为是路径或者文件名问题,经过反复查看都不行,最后用acdsee10的转换功能转换成jpg格式就好了,清楚缘由,这次又碰到这个问题,google了一下,原来图片从美术那里过来是ps保存的...
  • gitee上使用md添加本地端图片不显示的解决方案 名为ux的仓库下新建文档images,并添加一张图片名为WAI_e.png。目的是README.md档中添加这张图片。 错误回放 我使用了路径的方法添加这张图片,于是, ![WAI...
  • 大家好,我eclipse中建立一个动态web项目,里面想放一张图片eclipse中能显示图片,但我浏览器中看图片,网上说是路径的问题,但我觉得不是,请大家帮我分析下。附上我的原代码: <!DOCTYPE html>...
  • 按ctrl点02.jpg是可以idea中打开图片的,也没有提示找图片等信息 但浏览器中显示的图片是裂开的那个图 html文件如下 ``` <!DOCTYPE html> <title>download ```

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 151,771
精华内容 60,708
关键字:

不在图片