PhotoSwipe 设置图片自适应大小
PhotoSwipe 图片不知道宽 w 高 h 时,如何垂直居中显示,而且图片不变形?
根据官方入门例子,找到设置 items
的代码
// build items array
var items = [
{
src: 'https://placekitten.com/600/400',
w: 600,
h: 400
},
{
src: 'https://placekitten.com/1200/900',
w: 1200,
h: 900
}
];
更改成如下代码(主要是使用 html
替换 src
),记得去掉 h
和 w
属性。
// build items array
var items = [
{
html: '<div style="height: 100%; width: 100%; display: flex; align-items: center;"><img style="height: auto; width: 100%;" src="https://placekitten.com/600/400"/></div>',
},
{
html: '<div style="height: 100%; width: 100%; display: flex; align-items: center;"><img style="height: auto; width: 100%;" src="https://placekitten.com/1200/900"/></div>',
}
];