如何获得与 Medium.com 的功能标题相似的图像? (裁剪图像)

Posted

技术标签:

【中文标题】如何获得与 Medium.com 的功能标题相似的图像? (裁剪图像)【英文标题】:How can I achieve similar images to Medium.com's Feature Headers? (Cropped Images) 【发布时间】:2013-09-03 17:54:58 【问题描述】:

任何人都可以锻炼 medium.com 的功能标题图像裁剪方式吗?

我已经尝试在网上查找 - 但我并没有真正找到任何东西。它是同类中唯一的响应式图像大小调整解决方案(我个人遇到过)。

我会对任何想法都非常感兴趣 - 如果有帮助的话 - 他们使用的系统非常非常不适合纵向图像 - 它显然只适用于横向图像。

功能标题示例


缩放比较镜头

比较顶部和底部图像(两者完全相同) - 请注意顶部图像在顶部和底部有 10%~ 的裁剪 - 但宽度保持不变。

静态的 10%~ 适合这张图片 - 但对于另一个图片,它会产生截然不同的效果,让我认为宽度/高度/纵横比与裁剪百分比有关。


显示实际缩放过程的短视频

Tehan + Lax


CSS

目前这是我正在使用的代码(只是想测试百分比)。 该图像位于名为 image 的 div 内,该 div 使用了溢出隐藏,并且该图像使用填充顶部/底部来“裁剪”它。

.image   
    height: auto;
    width: 100%;
    overflow:hidden;   


.image img 
    height: auto;
    width: 100%;
    margin-bottom: -11%;  
    margin-top: -8%;

【问题讨论】:

Ollie,你有什么收获吗?我也很好奇…… 【参考方案1】:

您可以查看这些 tuts 并使用 skrollr.js

基本上使用css和javascript来控制图像和行为

http://bassta.bg/2013/12/medium-com-like-blurred-header-effect/

http://ihatetomatoes.net/how-to-create-a-parallax-scrolling-website/

【讨论】:

以上是关于如何获得与 Medium.com 的功能标题相似的图像? (裁剪图像)的主要内容,如果未能解决你的问题,请参考以下文章

如何使用Tensorflow获得数组的所有元素与同一数组中的所有其他元素的余弦相似度

比较不同语言的短字符串以获得相似的声音 - Soundex 是答案吗?

如何比较段落之间的相似性 NLP

查找两个字符串之间的相似度度量

用于语义相似性的 BERT 嵌入

iOS:如何使用 Swift 在视图之间滑动