css3
qq_2422941992
qq_2422941992
展开
-
css3设置图片自适应缩放
object-fit:cover;<div class="theImg"> <img src="../assets/img/img1.jpg"></div><style>.theImg{ width: 200px; height: 200px;}.theImg>img{ width: 100%; height: 100%; object-fit:cover;}</style...原创 2020-12-31 11:14:10 · 586 阅读 · 1 评论 -
小程序获取元素样式(宽高间距)
//获取宽度,设置高度等于宽度 var query = wx.createSelectorQuery().in(this); var that = this; query.select('.chooseImgItem').boundingClientRect(function (rect) { console.log(rect); that.setData({ 'objHeight': rect.width + 'px' })..原创 2020-10-08 20:30:22 · 372 阅读 · 0 评论 -
css设置图片根据最大边自适应
<div class="img_box"> <img src="1.jpg" alt="" class="img_newItem"></div>父级设置宽高和flex布局,子级图片设置最大宽高(max-width\max-height)为100%,宽高(width\height)为auto;.img_box{ width:100%; height:100%; display: flex; justify-content.原创 2020-10-08 20:26:41 · 934 阅读 · 0 评论 -
vue单页面切换动画效果
<transition name="slide-fade"> <router-view/></transition><style scoped>.slide-fade{ position: absolute;left:0;right: 0;}.slide-fade-enter-active { transition: all .5s ease;}.slide-fade-leave-active { tran...原创 2020-10-08 20:24:23 · 371 阅读 · 0 评论 -
css怎么设置文本超出显示省略号
1、单行文本超出.divObj{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}2、多行文本超出.divObj{ display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-c...原创 2020-02-09 13:03:07 · 87 阅读 · 0 评论 -
vue -webkit-box-orient vertical webpack打包后被过滤掉了 线上没有这行代码
问题:vue -webkit-box-orient vertical webpack打包后被过滤掉了 线上没有这行代码解决:(1)方法一:加上绿色注释,跳过webpack的css打包.word-overflow-3{ overflow:hidden; text-overflow:ellipsis; display:-webkit-box; /*! autoprefix...原创 2020-02-09 13:03:21 · 265 阅读 · 0 评论