{"id":220,"date":"2026-03-26T17:25:32","date_gmt":"2026-03-26T16:25:32","guid":{"rendered":"http:\/\/tbogdanstudio.fr\/?p=220"},"modified":"2026-03-27T22:45:06","modified_gmt":"2026-03-27T21:45:06","slug":"test-hauteur-dimage","status":"publish","type":"post","link":"https:\/\/tbogdanstudio.fr\/?p=220","title":{"rendered":"Test hauteur d&rsquo;image"},"content":{"rendered":"\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"1024\" src=\"http:\/\/tbogdanstudio.fr\/wp-content\/uploads\/2026\/03\/E-xtrude-1024x1024.png\" alt=\"\" class=\"wp-image-221\" srcset=\"https:\/\/tbogdanstudio.fr\/wp-content\/uploads\/2026\/03\/E-xtrude-1024x1024.png 1024w, https:\/\/tbogdanstudio.fr\/wp-content\/uploads\/2026\/03\/E-xtrude-300x300.png 300w, https:\/\/tbogdanstudio.fr\/wp-content\/uploads\/2026\/03\/E-xtrude-150x150.png 150w, https:\/\/tbogdanstudio.fr\/wp-content\/uploads\/2026\/03\/E-xtrude-768x768.png 768w, https:\/\/tbogdanstudio.fr\/wp-content\/uploads\/2026\/03\/E-xtrude.png 1080w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">Une image en 1080x1080px<\/figcaption><\/figure>\n\n\n\n<p>En version desktop, une image de 1080px de haut, c&rsquo;est trop. Par contre sur mobile c&rsquo;est parfait.<\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-28f84493 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:33.33%\">\n<p>La solution serait-elle de mettre l&rsquo;image dans un bloc colonne (66-33) ?<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:66.66%\">\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"1024\" src=\"http:\/\/tbogdanstudio.fr\/wp-content\/uploads\/2026\/03\/E-xtrude-1024x1024.png\" alt=\"\" class=\"wp-image-221\" srcset=\"https:\/\/tbogdanstudio.fr\/wp-content\/uploads\/2026\/03\/E-xtrude-1024x1024.png 1024w, https:\/\/tbogdanstudio.fr\/wp-content\/uploads\/2026\/03\/E-xtrude-300x300.png 300w, https:\/\/tbogdanstudio.fr\/wp-content\/uploads\/2026\/03\/E-xtrude-150x150.png 150w, https:\/\/tbogdanstudio.fr\/wp-content\/uploads\/2026\/03\/E-xtrude-768x768.png 768w, https:\/\/tbogdanstudio.fr\/wp-content\/uploads\/2026\/03\/E-xtrude.png 1080w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">Une image en 1080x1080px<\/figcaption><\/figure>\n<\/div>\n<\/div>\n\n\n\n<p>Moui, pas forc\u00e9ment convaincant l&rsquo;id\u00e9e du bloc Colonne \u2191.<br>Et bien peut \u00eatre simplement ajouter une hauteur max \u00e0 l&rsquo;image \u2193 540px ? Finalement en 620px.<\/p>\n\n\n\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;69d51d4658ba9&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"69d51d4658ba9\" class=\"wp-block-image size-large wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"1024\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"http:\/\/tbogdanstudio.fr\/wp-content\/uploads\/2026\/03\/E-xtrude-1024x1024.png\" alt=\"\" class=\"wp-image-221\" style=\"object-fit:cover\" srcset=\"https:\/\/tbogdanstudio.fr\/wp-content\/uploads\/2026\/03\/E-xtrude-1024x1024.png 1024w, https:\/\/tbogdanstudio.fr\/wp-content\/uploads\/2026\/03\/E-xtrude-300x300.png 300w, https:\/\/tbogdanstudio.fr\/wp-content\/uploads\/2026\/03\/E-xtrude-150x150.png 150w, https:\/\/tbogdanstudio.fr\/wp-content\/uploads\/2026\/03\/E-xtrude-768x768.png 768w, https:\/\/tbogdanstudio.fr\/wp-content\/uploads\/2026\/03\/E-xtrude.png 1080w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\taria-label=\"Agrandir\"\n\t\t\tdata-wp-init=\"callbacks.initTriggerButton\"\n\t\t\tdata-wp-on--click=\"actions.showLightbox\"\n\t\t\tdata-wp-style--right=\"state.imageButtonRight\"\n\t\t\tdata-wp-style--top=\"state.imageButtonTop\"\n\t\t>\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewBox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\" \/>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n\n\n\n<figure class=\"wp-block-gallery has-nested-images columns-default is-cropped wp-block-gallery-1 is-layout-flex wp-block-gallery-is-layout-flex\">\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"1024\" data-id=\"222\" src=\"http:\/\/tbogdanstudio.fr\/wp-content\/uploads\/2026\/03\/E-xtrude_light2-1024x1024.png\" alt=\"\" class=\"wp-image-222\" srcset=\"https:\/\/tbogdanstudio.fr\/wp-content\/uploads\/2026\/03\/E-xtrude_light2-1024x1024.png 1024w, https:\/\/tbogdanstudio.fr\/wp-content\/uploads\/2026\/03\/E-xtrude_light2-300x300.png 300w, https:\/\/tbogdanstudio.fr\/wp-content\/uploads\/2026\/03\/E-xtrude_light2-150x150.png 150w, https:\/\/tbogdanstudio.fr\/wp-content\/uploads\/2026\/03\/E-xtrude_light2-768x768.png 768w, https:\/\/tbogdanstudio.fr\/wp-content\/uploads\/2026\/03\/E-xtrude_light2.png 1080w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"1024\" data-id=\"223\" src=\"http:\/\/tbogdanstudio.fr\/wp-content\/uploads\/2026\/03\/E-xtrude_light2_probes-1024x1024.png\" alt=\"\" class=\"wp-image-223\" srcset=\"https:\/\/tbogdanstudio.fr\/wp-content\/uploads\/2026\/03\/E-xtrude_light2_probes-1024x1024.png 1024w, https:\/\/tbogdanstudio.fr\/wp-content\/uploads\/2026\/03\/E-xtrude_light2_probes-300x300.png 300w, https:\/\/tbogdanstudio.fr\/wp-content\/uploads\/2026\/03\/E-xtrude_light2_probes-150x150.png 150w, https:\/\/tbogdanstudio.fr\/wp-content\/uploads\/2026\/03\/E-xtrude_light2_probes-768x768.png 768w, https:\/\/tbogdanstudio.fr\/wp-content\/uploads\/2026\/03\/E-xtrude_light2_probes.png 1080w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">With light probes<\/figcaption><\/figure>\n<\/figure>\n\n\n\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;69d51d46593ae&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"69d51d46593ae\" class=\"wp-block-image size-large wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"684\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"http:\/\/tbogdanstudio.fr\/wp-content\/uploads\/2026\/03\/20220719_DSC3385-1024x684.jpg\" alt=\"\" class=\"wp-image-239\" srcset=\"https:\/\/tbogdanstudio.fr\/wp-content\/uploads\/2026\/03\/20220719_DSC3385-1024x684.jpg 1024w, https:\/\/tbogdanstudio.fr\/wp-content\/uploads\/2026\/03\/20220719_DSC3385-300x200.jpg 300w, https:\/\/tbogdanstudio.fr\/wp-content\/uploads\/2026\/03\/20220719_DSC3385-768x513.jpg 768w, https:\/\/tbogdanstudio.fr\/wp-content\/uploads\/2026\/03\/20220719_DSC3385-1536x1026.jpg 1536w, https:\/\/tbogdanstudio.fr\/wp-content\/uploads\/2026\/03\/20220719_DSC3385.jpg 1920w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\taria-label=\"Agrandir\"\n\t\t\tdata-wp-init=\"callbacks.initTriggerButton\"\n\t\t\tdata-wp-on--click=\"actions.showLightbox\"\n\t\t\tdata-wp-style--right=\"state.imageButtonRight\"\n\t\t\tdata-wp-style--top=\"state.imageButtonTop\"\n\t\t>\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewBox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\" \/>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>En version desktop, une image de 1080px de haut, c&rsquo;est trop. Par contre sur mobile c&rsquo;est parfait. La solution serait-elle de mettre l&rsquo;image dans un bloc colonne (66-33) ? Moui, pas forc\u00e9ment convaincant l&rsquo;id\u00e9e du bloc Colonne \u2191.Et bien peut \u00eatre simplement ajouter une hauteur max \u00e0 l&rsquo;image \u2193 540px ? Finalement en 620px.<\/p>\n","protected":false},"author":1,"featured_media":228,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-220","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/tbogdanstudio.fr\/index.php?rest_route=\/wp\/v2\/posts\/220","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tbogdanstudio.fr\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/tbogdanstudio.fr\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/tbogdanstudio.fr\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/tbogdanstudio.fr\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=220"}],"version-history":[{"count":20,"href":"https:\/\/tbogdanstudio.fr\/index.php?rest_route=\/wp\/v2\/posts\/220\/revisions"}],"predecessor-version":[{"id":340,"href":"https:\/\/tbogdanstudio.fr\/index.php?rest_route=\/wp\/v2\/posts\/220\/revisions\/340"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/tbogdanstudio.fr\/index.php?rest_route=\/wp\/v2\/media\/228"}],"wp:attachment":[{"href":"https:\/\/tbogdanstudio.fr\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=220"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/tbogdanstudio.fr\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=220"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/tbogdanstudio.fr\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=220"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}