不晓得哪个版本开始,WordPress在添加媒体入口里加入了“创建相册”功能,就是可以把你已上传的图片选择N个创建成相册,并且可以把相册插入到文章当中,对于某些多图的文章,使用这个功能让文章显得漂亮工整。
但是某些自己制作的主题并无法愉快的使用它,首先,插入的使用缩略图基本上要正方形的,如果之前上传的图片没有裁剪成正方形,那就有点难办了;其次,大大小小的图片有正方形有长方形的,另文章显得极其不规整,怎样让图片简单轻松无痛又漂亮的显示在文章页呢?
先看最终效果
每行2个:
每行3个:
每行4个:
每行5个:
还有更多就不演示了,回头自己试一下即可。
原理解释:
基本原理图如上,红色为图片原始比例,黄色为图片显示区域,超出部分隐藏,看似很简单,是实际上会稍微繁琐一些,因为图片始终无法合理的居中显示在黄色区域,好在CSS3给力
利用CSS3的translate(),WP的插入相册的DOM结构刚好够用,直接贴CSS吧
.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%);
}
核心CSS如上,根据主题不同请自行调整。
兼容性
此方法兼容IE8及以上,IE8不支持居中单不会拉伸图片(效果依然不错)
PS: 2016年12月16日 补充
感谢 秋空 提供的CSS3新属性:object-fit
新属性更加简单粗暴,仅居中代码从12行左右缩短到了3行(完美)
新属性代码如下:
.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;
}
新属性兼容性
PC:兼容绝大部分现代主流浏览器(webkit内核、firefox),不支持IE
Mobile:Safari、Android4.4.4+(国内ROM上Android5.x兼容不同)
学习了
无论高宽比什么样都可以吗?
@疆飞 就单纯的正方形,宽高自适应。
核心实现参考WordPress的媒体->媒体库。
看了你的文章,应该能满足你的需求,可以一试。
研究了一天多,终于解决了这个问题。多谢博主的这个viewjs
@枫叶 就是说你研究了一天导致我咖啡泡汤了吗,哈哈哈哈,恭喜恭喜,我现在很少逛博客,有问题可以QQ联系我:NzQyMjA2MTI1(B64)
@Tokin 你邮件评论回复好像没有用了,还得过来看一哈~不过我要是想找到你,你给我的这个字符串我相信我能找到你。虽然你不折腾博客了,但是我闲的没事了就来你这边转一转~
https://mrju.cn/20181221.html 你看看哈,文章里的出处链接点击后一直loading。。。
$(“.post”).find(“a”).each(function () {
if ($(this).attr(“rel”) !== “external”) {
$(this).attr(‘rel’, ‘external’);
}
});
简易版本的添加rel的jq。蛋疼。复杂的不太会写。。。