获得徽章 0
- 最近接到一个小改动的需求：列表展示图片时，要求在不挤压拉伸图片的情况下，展示图片相对居中的那一部分，例如：竖向长方形的图片，就要去头去尾展示中间的部分，横向长方形的图片，就要去左去右；像很一段时间，并没有找到合适的解决方法；看到某一段网友另辟蹊径的方法：设为背景图，
.dd{
display: block;
width: calc(50% - 5px);
height: 1px;
padding: 0 0 48% 0;
float: left;
overflow: hidden;
background-image:url('../images/img.png');
background-position:center;
background-repeat: no-repeat;
background-size: cover;
}
其中background-image是通过vue的语句动态加载的，效果看图片我截取了列表和预览效果；展开933 - 244
- D2 日报 2019年2月20日
* 官网传送门：
daily.fairyever.com
* 掘金同步发布地址：juejin.im
今日 9 条分享：
- [新闻] x 2
- [开源项目] x 4
- [分享] x 1
- [教程] x 1
- [网站] x 1
* 提交你的链接到日报：daily.fairyever.com
D2 日报是开源组织 D2 Projects 下的一个公益新闻类开源项目。
宗旨是一切资源免费且开源，但是希望每个人既是读者也是分享者，如果有足够的能力，你也可以成为开发者。
请在每天闲(mo)暇(yu)时光享受日报带来的丰富知识，也请在自己发现优质资源时随手分享给大家。展开评论7 - 最近【还】在基于 vuepress 写组件库文档，在写展示 demo 的时候，一般都需要同时展示 demo 和 code。最笨的办法当然是复制粘贴一把梭咯，可是维护起来太蛋疼了...于是参考 vuepress-plugin-demo-block 撸了个同类型的插件（有啥具体区别等我回头写篇文章...）。
* 一份代码同时生成 demo 和 code
* 代码可折叠
* 支持在线编辑：Codepen、JSFiddle、CodeSandbox
* 专门为浏览长代码进行了设计：sticky 的收起按钮、点击收起自动滚动到代码顶部展开229 - 460
github.com