Medium picture figure snippet

Medium picture.html

<figure name="322b" id="322b" class="graf--figure graf-after--h3">
  <div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 389px;">

    <div class="aspect-ratio-fill" style="padding-bottom: 55.60000000000001%;"></div>

    <div class="progressiveMedia js-progressiveMedia graf-image"
      data-image-id="1*vRzbJmu0VC5yWRWbc7d-0w.png"
      data-width="955" data-height="531"
      data-action="zoom" data-action-value="1*vRzbJmu0VC5yWRWbc7d-0w.png">

      <img src="https://cdn-images-1.medium.com/freeze/max/33/1*vRzbJmu0VC5yWRWbc7d-0w.png?q=20"
        crossorigin="anonymous" class="progressiveMedia-thumbnail js-progressiveMedia-thumbnail">

      <canvas class="progressiveMedia-canvas js-progressiveMedia-canvas"></canvas>

      <img class="progressiveMedia-image js-progressiveMedia-image"
        data-src="https://cdn-images-1.medium.com/max/880/1*vRzbJmu0VC5yWRWbc7d-0w.png">

      <noscript class="js-progressiveMedia-inner">
        <img class="progressiveMedia-noscript js-progressiveMedia-inner" src="https://cdn-images-1.medium.com/max/880/1*vRzbJmu0VC5yWRWbc7d-0w.png">
      </noscript>
    </div>
  </div>

  <figcaption class="imageCaption">
    The previous Salesforce1 style guide
  </figcaption>

</figure>

.aspect-ratio-fill 的 padding-bottom 數值應該處理一下小數位數比較好，
一般來說兩三位應該就夠用了
這玩意主要就是把高度撐起來
因為後面主要呈現的圖樣區塊是用 position: absolute 處理的

原圖寬高在 server side 已經有給出了
雖然不確定是 server 動態算還是在上傳時就有記進去
總之這寬高比數值在處理 RWD image 是個關鍵點
不然頁面會跳來跳去的，很影響觀感
這值其實也可以丟給 <noscript> 裡的 img 寬高，但也不是必要就是了

接下來重點是 RWD image 的格式
class="progressiveMedia-thumbnail js-progressiveMedia-thumbnail" 這張是小圖
主要是拿來餵 <canvas> 的

真正大圖是有 data-src attribute 的圖片
等它 onload 後才算真的把圖載進來了

HTML 原始碼的部份大抵就是這樣

素材兩張

https://lh3.googleusercontent.com/0OXvEhgqobk9KFJx_ZOhw2DgxUtSHobb8TIboyvYXndTEsbCg_CR_OwTYSmiMPYQ1ni6dqvWYzd3XuFOL4E09-vgZ8O3XUCV3eVZPMID66Ds7MGK1vgekhWrydwDvwnxnWL4ho7yEkNIrps7bxt78hVs7s6iCnwYfNOUWC_JELnApim9Hkq9QNm0fCBJjlI7-eZzhmIlsmDg1tzRVokuh4g4nJSBd5EF8irLA2w28XUXFeLykjy3AY8lKVWkJnSRxMmj9xEY2E7jtMaT-FBJgC6KKCPEi9ZLBILpEibhyeXcFjERY1Zjes1K_I9aaKwHx1WVviM1MGdOoy5HSVvwXqX_2emUSq5m9OGaxkiJm1n3yZC36B1KlQMupJLg9jXietNIb5n_PQGs0b9OwLAHvL3cCC_U0hvEnuY7AR2emyLMaq-ToylNaZRQ-xXI5uFyC0gIsVKipo6gPTvBUCEq6GjKF-lEvqUuSe1wndQV33MCCMS3-4GwrqMl697ar87sMyNvIwXMVL43GEE8iMmzDqQ3hpwkPSIxTTytf-HFmnM=w20

https://lh3.googleusercontent.com/0OXvEhgqobk9KFJx_ZOhw2DgxUtSHobb8TIboyvYXndTEsbCg_CR_OwTYSmiMPYQ1ni6dqvWYzd3XuFOL4E09-vgZ8O3XUCV3eVZPMID66Ds7MGK1vgekhWrydwDvwnxnWL4ho7yEkNIrps7bxt78hVs7s6iCnwYfNOUWC_JELnApim9Hkq9QNm0fCBJjlI7-eZzhmIlsmDg1tzRVokuh4g4nJSBd5EF8irLA2w28XUXFeLykjy3AY8lKVWkJnSRxMmj9xEY2E7jtMaT-FBJgC6KKCPEi9ZLBILpEibhyeXcFjERY1Zjes1K_I9aaKwHx1WVviM1MGdOoy5HSVvwXqX_2emUSq5m9OGaxkiJm1n3yZC36B1KlQMupJLg9jXietNIb5n_PQGs0b9OwLAHvL3cCC_U0hvEnuY7AR2emyLMaq-ToylNaZRQ-xXI5uFyC0gIsVKipo6gPTvBUCEq6GjKF-lEvqUuSe1wndQV33MCCMS3-4GwrqMl697ar87sMyNvIwXMVL43GEE8iMmzDqQ3hpwkPSIxTTytf-HFmnM

重新上傳後
http://i.imgur.com/GJZ5Afa.jpg
http://i.imgur.com/i3eXYRR.jpg