【问题标题】:How to set size/rotate image in jekyll?如何在 jekyll 中设置大小/旋转图像?
【发布时间】:2019-05-28 06:33:45
【问题描述】:

如何在 jekyll markdown 中设置图片大小?

![steam-fish-1]({{ "/assets/steam-fish-1.jpeg" | absolute_url }})

我正在使用 jekyll minima。使用

![steam-fish-1]({{ "/assets/steam-fish-1.jpeg" | absolute_url }} =250x)

来自Changing image size in Markdown 不起作用。如果可能的话,我也想知道如何旋转图像。

【问题讨论】:

    标签: html markdown jekyll github-pages


    【解决方案1】:

    Jekyll 似乎接受属性列表。您可以按如下方式设置图像的大小:

    ![steam-fish-1](/assets/steam-fish-1.jpeg){: width="250" }
    

    (或使用height="250")。属性值以像素为单位,并且应该(根据 HTML 规范)没有明确的单位。

    【讨论】:

    • 对我来说,这就是解决方案。像这样设置一个 CSS id,然后根据 CSS 更改 widthmax-width
    • 在 Markdown 语句中添加 {: width="250" } 的最佳解决方案。工作正常! @Cris Luengo
    【解决方案2】:

    Markdown 没有内置对图像大小的支持,因此唯一真正的解决方案是在 Markdown 中使用一点 HTML。鉴于此,我的 jekyll-image-size 插件可以在没有任何 CSS 的情况下调整您需要的大小。

    例子:

    <!-- template -->
    {{ /assets/steam-fish-1.jpeg:img?width=250 alt='steam-fish-1' }}
    
    <!-- output -->
    <a href="/assets/steam-fish-1.jpeg" width='250' height='YYY' alt='steam-fish-1'>
    

    (其中YYY 是图片的实际按比例缩放的高度。)

    如果你需要absolute_url过滤器:

    <!-- template -->
    <a 
      href={{ "/assets/steam-fish-1.jpeg" | absolute_url }} 
      {{ /assets/steam-fish-1.jpeg:props?width=250 }} 
      alt='steam-fish-1'
    >
    
    <!-- output -->
    <a href="http://test.com/assets/steam-fish-1.jpeg" width='250' height='YYY' alt='steam-fish-1'>
    

    对于旋转图像,仅旋转图像文件本身是否有意义?

    【讨论】:

    • 它对我不起作用。 jekyll-image-size 文档说你需要使用{% imagesize source:img %},但是你使用{{ source:img }}。我错过了什么吗?
    【解决方案3】:

    如果无法在 Jekyll 生成的 HTML 代码中包含 size/rotation 属性(如 illustrated here,请参阅 cmets)...总会有 CSS 路由。

    参见“Resize image proportionally with CSS?”:您可以添加 CSS 样式表来设置图片的大小。甚至rotate it

    【讨论】:

    • 谢谢!我不太明白如何在 Jekyll 中创建 CSS 文件?如果您能提供更具体的步骤,那就太好了。
    • @ZHU 当然可以,你可以从help.github.com/articles/…开始
    【解决方案4】:

    jekyll-image-size,应该使用

    <!-- template -->
    {% imagesize /assets/steam-fish-1.jpeg:img?width=250 alt='steam-fish-1' %}
    
    <!-- output -->
    <a href="assets/steam-fish-1.jpeg" width='250' height='YYY' alt='steam-fish-1'>
    

    【讨论】:

      猜你喜欢
      • 2019-12-10
      • 1970-01-01
      • 1970-01-01
      • 2020-10-21
      • 1970-01-01
      • 2020-08-29
      • 2018-12-11
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多