{"id":4118,"date":"2022-01-17T12:27:48","date_gmt":"2022-01-17T12:27:48","guid":{"rendered":"https:\/\/trial.pixelgrade.com\/tosca\/?page_id=4118"},"modified":"2022-01-17T13:15:11","modified_gmt":"2022-01-17T13:15:11","slug":"responsive-image","status":"publish","type":"page","link":"https:\/\/trial.pixelgrade.com\/tosca\/responsive-image\/","title":{"rendered":"Responsive Image"},"content":{"rendered":"\n

Check the loaded image using the currentSrc<\/code> property in Chrome Developer Tool<\/em>, under the Properties<\/em> tab.<\/p>\n\n\n\n

\n

One-third width images<\/h2>\n\n\n\n

Use the first row of Image blocks as reference.<\/p>\n<\/div>\n\n\n\n

\n
\n
\"\"
Full size (2000×1872)<\/figcaption><\/figure>\n<\/div>\n\n\n\n
\n
\"\"
Medium (300×279)<\/figcaption><\/figure>\n<\/div>\n\n\n\n
\n
\"\"
Thumbnail (150×150)<\/figcaption><\/figure>\n<\/div>\n<\/div>\n\n\n
\n\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\n\n\t
\n\t\t
\n\t\t\t
\n\t\t\t\t\t
\"\"\n<\/div>\n\t\t\t\t<\/div>\n\t\t\t<\/div><\/div>\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t

Cards Collection<\/p>\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t<\/div>\n\n\t\n\n\n\t

\n\t\t
\n\t\t\t
\n\t\t\t\t\t
\"\"\n<\/div>\n\t\t\t\t<\/div>\n\t\t\t<\/div><\/div>\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t

three columns<\/p>\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t<\/div>\n\n\t\n\n\n\t

\n\t\t
\n\t\t\t
\n\t\t\t\t\t
\"\"\n<\/div>\n\t\t\t\t<\/div>\n\t\t\t<\/div><\/div>\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t

in a row<\/p>\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t<\/div>\n\n\t\n\n\t\t\t\t<\/div>\n\t\t\t<\/div><\/div>\n\t\t<\/div>\n\n

\n\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\n\n\t
\n\t\t
\n\t\t\t
\n\t\t\t\t\t
\"\"\n<\/div>\n\t\t\t\t<\/div>\n\t\t\t<\/div><\/div>\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t\n\n
  • Card Elements Stacking: Horizontal Reverse<\/li>
  • Block Width: Full<\/li>
  • Content Width relative to Media Area: 70<\/li><\/ul>\n\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t<\/div>\n\n\t\n\n\t\t\t\t<\/div>\n\t\t\t<\/div><\/div>\n\t\t<\/div>\n\n\n
    \n

    Quarter width images<\/h2>\n\n\n\n

    Use the first row of Image blocks as reference.<\/p>\n<\/div>\n\n\n\n

    \n
    \n
    \"\"
    Full size (2000×1872)<\/figcaption><\/figure>\n<\/div>\n\n\n\n
    \n
    \"\"
    Large (1024×953)<\/figcaption><\/figure>\n<\/div>\n\n\n\n
    \n
    \"\"
    Medium (300×279)<\/figcaption><\/figure>\n<\/div>\n\n\n\n
    \n
    \"\"
    Thumbnail (150×150)<\/figcaption><\/figure>\n<\/div>\n<\/div>\n\n\n
    \n\t\t\t
    \n\t\t\t\t
    \n\t\t\t\t\t\n\n\t
    \n\t\t
    \n\t\t\t
    \n\t\t\t\t\t
    \"\"\n<\/div>\n\t\t\t\t<\/div>\n\t\t\t<\/div><\/div>\t\t\t\t
    \n\t\t\t\t\t
    \n\t\t\t\t\t\t

    Cards Collection<\/p>\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t<\/div>\n\n\t\n\n\n\t

    \n\t\t
    \n\t\t\t
    \n\t\t\t\t\t
    \"\"\n<\/div>\n\t\t\t\t<\/div>\n\t\t\t<\/div><\/div>\t\t\t\t
    \n\t\t\t\t\t
    \n\t\t\t\t\t\t

    four columns<\/p>\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t<\/div>\n\n\t\n\n\n\t

    \n\t\t
    \n\t\t\t
    \n\t\t\t\t\t
    \"\"\n<\/div>\n\t\t\t\t<\/div>\n\t\t\t<\/div><\/div>\t\t\t\t
    \n\t\t\t\t\t
    \n\t\t\t\t\t\t

    in a <\/p>\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t<\/div>\n\n\t\n\n\n\t

    \n\t\t
    \n\t\t\t
    \n\t\t\t\t\t
    \"\"\n<\/div>\n\t\t\t\t<\/div>\n\t\t\t<\/div><\/div>\t\t\t\t
    \n\t\t\t\t\t
    \n\t\t\t\t\t\t

    row<\/p>\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t<\/div>\n\n\t\n\n\t\t\t\t<\/div>\n\t\t\t<\/div><\/div>\n\t\t<\/div>\n\n

    \n\t\t\t
    \n\t\t\t\t
    \n\t\t\t\t\t\n\n\t
    \n\t\t
    \n\t\t\t
    \n\t\t\t\t\t
    \"\"\n<\/div>\n\t\t\t\t<\/div>\n\t\t\t<\/div><\/div>\t\t\t\t
    \n\t\t\t\t\t
    \n\t\t\t\t\t\t\n\n
    • Card Elements Stacking: Horizontal Reverse<\/li>
    • Block Width: Full<\/li>
    • Content Width relative to Media Area: 75<\/li><\/ul>\n\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t<\/div>\n\n\t\n\n\t\t\t\t<\/div>\n\t\t\t<\/div><\/div>\n\t\t<\/div>\n\n\n
      \n

      Full-width images<\/h2>\n\n\n\n

      Use the Image block as reference.<\/p>\n<\/div>\n\n\n\n

      \"\"<\/figure>\n\n\n\n

      Card Elements Stacking: Vertical<\/p>\n\n\n

      \n\t\t\t
      \n\t\t\t\t
      \n\t\t\t\t\t\n\n\t
      \n\t\t
      \n\t\t\t
      \n\t\t\t\t\t
      \"\"\n<\/div>\n\t\t\t\t<\/div>\n\t\t\t<\/div><\/div>\t\t<\/div>\n\t<\/div>\n\n\t\n\n\t\t\t\t<\/div>\n\t\t\t<\/div><\/div>\n\t\t<\/div>\n\n\n

      Card Elements Stacking: Stacked (eg. Hero)<\/p>\n\n\n

      \n\t\t\t
      \n\t\t\t\t
      \n\t\t\t\t\t\n\n\t
      \n\t\t
      \n\t\t\t
      \n\t\t\t\t\t
      \"\"\n<\/div>\n\t\t\t\t<\/div>\n\t\t\t<\/div><\/div>\t\t\t\t
      \n\t\t\t\t\t
      \n\t\t\t\t\t\t\n\n

      <\/p>\n\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t<\/div>\n\n\t\n\n\t\t\t\t<\/div>\n\t\t\t<\/div><\/div>\n\t\t<\/div>","protected":false},"excerpt":{"rendered":"

      Check the loaded image using the currentSrc property in Chrome Developer Tool, under the Properties tab. One-third width images Use the first row of Image […]<\/p>\n","protected":false},"author":3,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"novablocks_hero_scroll_indicator":false,"novablocks_hero_position_indicators":false,"supernova_prevent_duplicate":false,"inline_featured_image":false},"_links":{"self":[{"href":"https:\/\/trial.pixelgrade.com\/tosca\/wp-json\/wp\/v2\/pages\/4118"}],"collection":[{"href":"https:\/\/trial.pixelgrade.com\/tosca\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/trial.pixelgrade.com\/tosca\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/trial.pixelgrade.com\/tosca\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/trial.pixelgrade.com\/tosca\/wp-json\/wp\/v2\/comments?post=4118"}],"version-history":[{"count":22,"href":"https:\/\/trial.pixelgrade.com\/tosca\/wp-json\/wp\/v2\/pages\/4118\/revisions"}],"predecessor-version":[{"id":4172,"href":"https:\/\/trial.pixelgrade.com\/tosca\/wp-json\/wp\/v2\/pages\/4118\/revisions\/4172"}],"wp:attachment":[{"href":"https:\/\/trial.pixelgrade.com\/tosca\/wp-json\/wp\/v2\/media?parent=4118"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}