X1运营交流
最近在优化细节,总结出一个做风格布局图片很有用的代码分享给大家。
1412
79


大家先看下面的图片。因为用户上传的图片尺寸根本没办法统一,这也是无法避免的问题。

导致我们做风格的时候,要么就把缩略图拉扯成固定的比例,这就会导致图片变形。

如果不想变形,按固定的比例缩放,就会出现左右或上下白边,导致页面不好看。


为解决这个问题,今天早上特意做了一个总结,可以实现下图的效果,任意比例调取任意尺寸的图片,都可以填充满你的风格布局。而不会出现白边或者拉扯变形。









<style type="text/css">
.pic2{
	display: inline-block;
    width: 100px;
    height: 300px;
    overflow: hidden;
	border:1px solid red;
	position:relative;
	margin:8px
}
.pic2 img {
	position:absolute;  
}
</style>
<div class="pic2"><img src="/public/uploads/images/20200630/1_202006301016251399c.jpeg" onload="set_img_size(this,100,300)" /></div>



关键JS函数如下:


以下是隐藏的内容需要回复才可见,你回复后,需要刷新网页才可见!
************************************

10
赏礼
赏钱
收藏
点击回复
      全部留言
  • 79
  • 阿赖耶识 程序开发者 消费:24.43元 1个月前 22:226楼
    好方法
0 赏钱 赏礼回复
  • 银杏114在线 实战运营者 消费:3592.75元 1个月前 20:436楼
    这个真不错
0 赏钱 赏礼回复
  • 王志勇-1 普通粉丝 消费:0元 1个月前 11:206楼
    学习
0 赏钱 赏礼回复
  • 聶愷 实战运营者 消费:0元 1个月前 15:12
    华为
    6楼
    学习
0 赏钱 赏礼回复
  • 开心每天 普通粉丝 消费:8292.72元 1个月前 12:49
    其他手机
    6楼
    这个真不错
0 赏钱 赏礼回复
  • 艺猫 普通粉丝 消费:115.1元 1个月前 20:526楼
    来收藏学习了
0 赏钱 赏礼回复
  • 诚信lawyer 普通粉丝 消费:0.1元 3个月前 20:096楼
    学习了
0 赏钱 赏礼回复
  • 素顏鴿 普通粉丝 消费:130.04元 3个月前 21:486楼
    正好学习下。
0 赏钱 赏礼回复
  • 微风-空灵 实战运营者 消费:140.02元 4个月前 21:16
    华为
    6楼
    肯定是好东西
0 赏钱 赏礼回复
  • 齐博神州 普通粉丝 消费:2958.36元 4个月前 12:48
    其他手机
    6楼
    学习一下
0 赏钱 赏礼回复
  • 袁冬 普通粉丝 消费:160.85元 4个月前 08:366楼
    好    顶起来
0 赏钱 赏礼回复
  • 码农 程序开发者 消费:0元 4个月前 18:18
    其他手机
    6楼
    很实用
0 赏钱 赏礼回复
  • ゞ黑娃oοΟ-1763 实战运营者 消费:426.25元 4个月前 16:28
    华为
    6楼
    瞅一瞅,貌似很厉害的样子
0 赏钱 赏礼回复
  • 西华 普通粉丝 消费:1919.07元 4个月前 16:106楼
    重要
0 赏钱 赏礼回复
  • FJ 普通粉丝 消费:85.17元 4个月前 16:056楼
    学习一下
0 赏钱 赏礼回复
更多回复
      你可能感兴趣的主题
恢复多功能编辑器
  • 3 1
  • X1运营交流
        圈内贴子49946
    • 圈子成员939
    本圈子内的新贴

    推荐内容
    扫一扫访问手机版
    请选择要切换的马甲:

     
    网页即时交流
    QQ咨询
    咨询热线
    020-28998648