⚠️
秋叶资源网上的部份代码及教程来源于互联网,仅供网友学习交流,未经秋叶作者或上传书面授权,请勿作他用。
若您的权利被侵害,请联系站长 QQ: 550601163 或 点击右侧 私信:秋叶 反馈,我们将尽快处理。
低调朴实的双按钮引导卡片

秋叶资源网 by Qiuye

秋叶资源网: 美化WordPress插入到文章中的相册

释放双眼,带上耳机,听听看~!

利用CSS3的translate(),WP的插入相册的DOM结构刚好够用,直接贴CSS
核心CSS如上,根据主题不同请自行调整。

此方法兼容IE8及以上,IE8不支持居中单不会拉伸图片(效果依然不错)

CSS3新属性:object-fit

__________________________________________________________________________________

.gallery{
margin:-1%!important;
}
.gallery .gallery-item {
padding:1%;
/* width:14.66666%!important; */
margin: 0 !important;
overflow:hidden;
position:relative;
}
.gallery-columns-3 .gallery-item{
width:33.3333333%!important;
}
.gallery .gallery-item dt:before {
content: "";
display: block;
padding-top: 100%;
}
.gallery .gallery-item dt {
position: relative;
box-shadow:0 0 0 1px rgba(0,0,0,.1) inset;
background: #eee;
cursor: pointer;
overflow: hidden;
}
.gallery .gallery-item img{
position:absolute;
top: 0;
left: 0;
height:100%;
width:100%;
object-fit:cover;
border:0!important;
}

 

__________________________________________________________________________________

旧的


.gallery{
margin:-1%!important;
}
.gallery .gallery-item {
padding:1%;
/* width:14.66666%!important; */
margin: 0 !important;
overflow:hidden;
position:relative;
}
.gallery-columns-3 .gallery-item{
width:33.3333333%!important;
}
.gallery .gallery-item dt:before {
content: "";
display: block;
padding-top: 100%;
}
.gallery .gallery-item dt {
position: relative;
box-shadow:0 0 0 1px rgba(0,0,0,.1) inset;
background: #eee;
cursor: pointer;
overflow: hidden;
}
.gallery .gallery-item a {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
opacity: 1;
-webkit-transition: opacity .1s;
transition: opacity .1s;
transform: translate(50%,50%);
}
.gallery .gallery-item img{
position:absolute;
top: 0;
left: 0;
max-height:100%;
max-width:none!important;
width:auto!important;
border:0!important;
transform: translate(-50%,-50%);
}

 

人已赞赏
B2美化

b2主题新增页面,简洁高端,值得集成

2020-5-15 12:54:19

B2美化

b2主题登录框二次美化开发

2020-5-21 10:29:41

免责声明 秋叶资源网的资源均来自于互联网,仅为资源共享、学习参考之目的,其版权均归原作者及其网站所有。
如有侵权烦请发送邮件至:qiuyegen@qq.com
0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
有新消息 消息中心
搜索
WordPress美化 - Npcink