dillonzq / LoveIt

❤️A clean, elegant but advanced blog theme for Hugo 一个简洁、优雅且高效的 Hugo 主题
https://hugoloveit.com
MIT License
3.41k stars 1.08k forks source link

lightgallery启用时,图片会显示得很小,是设计如此还是bug #311

Open HStarrr opened 4 years ago

HStarrr commented 4 years ago

使用: ![](/images/xxxx.png "图片") 结果: image

dillonzq commented 4 years ago

@HStarrr 只限制了最大宽度95%,你的图片原始尺寸是多少?

HStarrr commented 4 years ago

有大有小,最大的有 1833*961的,但显示出来还是会比普通的小一些。 我观察了一下,当第一次进入文章的时候,显示出来是正常的。但在当前页面刷新一次,它就会变小。 我看其他人也遇到了这个问题:https://hugoloveit.com/zh-cn/theme-documentation-extended-shortcodes/ image

dillonzq commented 4 years ago

@HStarrr 可能和最近引入的兼容库 object-fit-images 有关, 我再确认一下

dillonzq commented 4 years ago

@HStarrr 我验证和 object-fit-images 没有关系。你需要的是把图片放大吗? 默认情况下图片都是按照原始尺寸显示的,你可以看浏览器的调试信息,只有在图片宽度过大的情况下会限制宽度来适应页面显示区域的大小。 lightgallery 对原始图片没有影响,只会增加一个点击后全屏浏览的视图。 如果你想要你的图片放大显示可以使用 image shortcode 加 width 参数。

HStarrr commented 4 years ago

我截图说明吧。 当我第一次打开文章时,图片大小是这样的: image

当我在打开的文章页面按F5刷新后,图片大小会明显变小: image

lightgallery 的功能是正确的,只是在不点开图片的情况下,图片会看上去很奇怪。 这个问题应该不是v0.2版本导致的,v0.1版本的时候我就发现了。

dillonzq commented 4 years ago

@HStarrr 你使用的是什么系统和浏览器?

HStarrr commented 4 years ago

Win10 + Chrome

测试了下,Chrome和Edge有这个问题,Firefox是正常的。

dillonzq commented 4 years ago

这个问题我再长期观察一下吧

HStarrr commented 4 years ago

辛苦大佬了。 我的锅,一开始没把系统版本和浏览器版本说清楚,不好意思,下次一定注意。

seacj commented 4 years ago

Win10+Chrome浏览器下,TOC和lightgallery同时使用的时候,有几率会出现TOC错位的bug,不知道是不是同样原因造成的 image image

HStarrr commented 4 years ago

重新启动hugo server或者重新打开网页试试呢,我遇到这种情况重新打开网页或多刷新几次就好了

dillonzq commented 4 years ago

本地预览的时候有可能出现这种情况, 可能和浏览器渲染和缓存的机制有关

seacj commented 4 years ago

本地预览的时候有可能出现这种情况, 可能和浏览器渲染和缓存的机制有关

不只是本地预览,上线之后也会有。应该和渲染顺序相关,只在Win10+Chrome上有这个情况,Edge上没有问题。 image

dillonzq commented 4 years ago

@seacj 我大概知道问题在哪里了

michaelmyc commented 4 years ago

在styling里面加上这几行就可以解决了,是一个lazysizes的问题,具体参见https://github.com/aFarkas/lazysizes/issues/508

img[data-sizes="auto"] {
    display: block;
    width: 100%;
}
GarrickLin commented 3 years ago

在styling里面加上这几行就可以解决了,是一个lazysizes的问题,具体参见aFarkas/lazysizes#508

img[data-sizes="auto"] {
    display: block;
    width: 100%;
}

请问具体是哪个文件里改呢?

michaelmyc commented 3 years ago

在styling里面加上这几行就可以解决了,是一个lazysizes的问题,具体参见aFarkas/lazysizes#508

img[data-sizes="auto"] {
    display: block;
    width: 100%;
}

请问具体是哪个文件里改呢?

放到_custom.scss里就行了,在assets/css里面,没有的话创建一个就行

evilpan commented 2 years ago

Same as #452

xiaobinqt commented 2 years ago

我有个比较脏的办法,我把 lazysizes.js 里 srcset 直接去掉了,重新 uglifyjs.cmd lazysizes.js -o lazysizes.min.js 编译了下,可以解决这个问题。

image

image

iuxt commented 2 years ago

我有个比较脏的办法,我把 lazysizes.js 里 srcset 直接去掉了,重新 uglifyjs.cmd lazysizes.js -o lazysizes.min.js 编译了下,可以解决这个问题。

image

image

赞,测试过这样改是可以的,也不会让小图变得很大。

whuwangyong commented 2 years ago

等待修复。