{"id":4440,"date":"2023-02-12T22:38:54","date_gmt":"2023-02-12T21:38:54","guid":{"rendered":"https:\/\/www.open-user-map.com\/?post_type=ht_kb&#038;p=4440"},"modified":"2023-09-27T09:29:33","modified_gmt":"2023-09-27T07:29:33","slug":"adjusting-the-height-of-the-location-image","status":"publish","type":"ht_kb","link":"https:\/\/www.open-user-map.com\/fr\/knowledge-base\/adjusting-the-height-of-the-location-image\/","title":{"rendered":"R\u00e9glage de la hauteur de l'image de l'emplacement"},"content":{"rendered":"<p>Vos utilisateurs aiment peut-\u00eatre t\u00e9l\u00e9charger des images en mode portrait. Sur les petits \u00e9crans, comme ceux des t\u00e9l\u00e9phones portables, cela peut entra\u00eener des probl\u00e8mes de style ind\u00e9sirables, car l'image \u00e0 l'int\u00e9rieur d'une bulle d'emplacement occupe trop d'espace. <\/p>\n\n\n\n<p>Pour \u00e9viter cela, vous pouvez utiliser le code CSS suivant pour d\u00e9finir une dimension d'image fixe (par exemple 4:3) et recadrer ou mettre \u00e0 l'\u00e9chelle l'image \u00e0 l'int\u00e9rieur :<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro cbp-has-line-numbers\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;--cbp-line-number-color:#f6f6f4;--cbp-line-number-width:8.4375px;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\" data-no-translation=\"\" data-no-auto-translation=\"\"><span style=\"display:flex;align-items:center;padding:10px 0px 10px 16px;margin-bottom:-2px;width:100%;text-align:left;background-color:#333545;color:#ebebe6\">CSS<\/span><span role=\"button\" tabindex=\"0\" data-code=\"@media (max-width: 768px) {  .open-user-map .box-wrap .map-wrap .leaflet-map .leaflet-popup-content-wrapper .leaflet-popup-content .oum_location_image img {    aspect-ratio: 4\/3;    object-fit: contain;    object-position: top center;    background-color: #eee;  }}\" style=\"color:#f6f6f4;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewbox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki dracula-soft\" style=\"background-color: #282A36\" tabindex=\"0\"><code data-no-translation=\"\" data-no-auto-translation=\"\"><span class=\"line\"><span style=\"color: #F286C4\">@media<\/span><span style=\"color: #F6F6F4\"> (<\/span><span style=\"color: #97E1F1\">max-width<\/span><span style=\"color: #F286C4\">:<\/span><span style=\"color: #F6F6F4\"> <\/span><span style=\"color: #BF9EEE\">768<\/span><span style=\"color: #F286C4\">px<\/span><span style=\"color: #F6F6F4\">) {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F6F6F4\">  <\/span><span style=\"color: #62E884; font-style: italic\">.open-user-map<\/span><span style=\"color: #F286C4\"> <\/span><span style=\"color: #62E884; font-style: italic\">.box-wrap<\/span><span style=\"color: #F286C4\"> <\/span><span style=\"color: #62E884; font-style: italic\">.map-wrap<\/span><span style=\"color: #F286C4\"> <\/span><span style=\"color: #62E884; font-style: italic\">.leaflet-map<\/span><span style=\"color: #F286C4\"> <\/span><span style=\"color: #62E884; font-style: italic\">.leaflet-popup-content-wrapper<\/span><span style=\"color: #F286C4\"> <\/span><span style=\"color: #62E884; font-style: italic\">.leaflet-popup-content<\/span><span style=\"color: #F286C4\"> <\/span><span style=\"color: #62E884; font-style: italic\">.oum_location_image<\/span><span style=\"color: #F286C4\"> img<\/span><span style=\"color: #F6F6F4\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F6F6F4\">    aspect-ratio<\/span><span style=\"color: #F286C4\">:<\/span><span style=\"color: #F6F6F4\"> <\/span><span style=\"color: #BF9EEE\">4<\/span><span style=\"color: #F6F6F4\">\/<\/span><span style=\"color: #BF9EEE\">3<\/span><span style=\"color: #F6F6F4\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F6F6F4\">    <\/span><span style=\"color: #97E1F1\">object-fit<\/span><span style=\"color: #F286C4\">:<\/span><span style=\"color: #F6F6F4\"> <\/span><span style=\"color: #BF9EEE\">contain<\/span><span style=\"color: #F6F6F4\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F6F6F4\">    <\/span><span style=\"color: #97E1F1\">object-position<\/span><span style=\"color: #F286C4\">:<\/span><span style=\"color: #F6F6F4\"> <\/span><span style=\"color: #BF9EEE\">top<\/span><span style=\"color: #F6F6F4\"> <\/span><span style=\"color: #BF9EEE\">center<\/span><span style=\"color: #F6F6F4\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F6F6F4\">    <\/span><span style=\"color: #97E1F1\">background-color<\/span><span style=\"color: #F286C4\">:<\/span><span style=\"color: #F6F6F4\"> <\/span><span style=\"color: #BF9EEE\">#eee<\/span><span style=\"color: #F6F6F4\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F6F6F4\">  }<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F6F6F4\">}<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p><\/p>\n\n\n\n<p>Vous pouvez jouer avec la fonction <strong>rapport d'aspect<\/strong> ou essayez <strong>objet-fit : couverture<\/strong> pour recadrer l'image.<\/p>\n\n\n\n<p>Lors d'une prochaine mise \u00e0 jour, nous pr\u00e9voyons de fournir une nouvelle interface utilisateur pour l'affichage mobile, il ne s'agit donc que d'une solution temporaire et rapide.<\/p>","protected":false},"excerpt":{"rendered":"<p>Vos utilisateurs aiment peut-\u00eatre t\u00e9l\u00e9charger des images en mode portrait. Sur les petits \u00e9crans, comme ceux des t\u00e9l\u00e9phones portables, cela peut entra\u00eener des probl\u00e8mes de style ind\u00e9sirables, car l'image \u00e0 l'int\u00e9rieur d'une bulle d'emplacement occupe trop d'espace. Pour \u00e9viter cela, vous pouvez utiliser le code CSS suivant pour d\u00e9finir une dimension d'image fixe (par exemple 4:3) et recadrer ... <a href=\"https:\/\/www.open-user-map.com\/fr\/knowledge-base\/adjusting-the-height-of-the-location-image\/\">Suite<\/a><\/p>","protected":false},"author":50,"comment_status":"closed","ping_status":"closed","template":"","format":"standard","meta":{"footnotes":""},"ht-kb-category":[25],"ht-kb-tag":[56,58,62,55,64,57],"class_list":["post-4440","ht_kb","type-ht_kb","status-publish","format-standard","hentry","ht_kb_category-customization","ht_kb_tag-css","ht_kb_tag-custom","ht_kb_tag-image","ht_kb_tag-marker","ht_kb_tag-responsive","ht_kb_tag-style"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v28.1 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Adjusting the height of the location image - Open User Map<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.open-user-map.com\/fr\/knowledge-base\/adjusting-the-height-of-the-location-image\/\" \/>\n<meta property=\"og:locale\" content=\"fr_FR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Adjusting the height of the location image - Open User Map\" \/>\n<meta property=\"og:description\" content=\"Maybe your users like to upload images in portrait mode. On small screens like on a Mobile this could result into unwanted style issues, as the image inside a location bubble need too much space. To prevent this you could use the following CSS code to set a fixed image dimension (e.g. 4:3) and crop &hellip; Continued\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.open-user-map.com\/fr\/knowledge-base\/adjusting-the-height-of-the-location-image\/\" \/>\n<meta property=\"og:site_name\" content=\"Open User Map\" \/>\n<meta property=\"article:modified_time\" content=\"2023-09-27T07:29:33+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Dur\u00e9e de lecture estim\u00e9e\" \/>\n\t<meta name=\"twitter:data1\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"TechArticle\",\"@id\":\"https:\\\/\\\/www.open-user-map.com\\\/knowledge-base\\\/adjusting-the-height-of-the-location-image\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.open-user-map.com\\\/knowledge-base\\\/adjusting-the-height-of-the-location-image\\\/\"},\"author\":{\"name\":\"Daniel Sch\u00f6nherr\",\"@id\":\"https:\\\/\\\/www.open-user-map.com\\\/#\\\/schema\\\/person\\\/d9c8cbe470ae2702b6de61e0f73a7402\"},\"headline\":\"Adjusting the height of the location image\",\"datePublished\":\"2023-02-12T21:38:54+00:00\",\"dateModified\":\"2023-09-27T07:29:33+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.open-user-map.com\\\/knowledge-base\\\/adjusting-the-height-of-the-location-image\\\/\"},\"wordCount\":111,\"publisher\":{\"@id\":\"https:\\\/\\\/www.open-user-map.com\\\/#organization\"},\"inLanguage\":\"fr-FR\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.open-user-map.com\\\/knowledge-base\\\/adjusting-the-height-of-the-location-image\\\/\",\"url\":\"https:\\\/\\\/www.open-user-map.com\\\/knowledge-base\\\/adjusting-the-height-of-the-location-image\\\/\",\"name\":\"Adjusting the height of the location image - Open User Map\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.open-user-map.com\\\/#website\"},\"datePublished\":\"2023-02-12T21:38:54+00:00\",\"dateModified\":\"2023-09-27T07:29:33+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.open-user-map.com\\\/knowledge-base\\\/adjusting-the-height-of-the-location-image\\\/#breadcrumb\"},\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.open-user-map.com\\\/knowledge-base\\\/adjusting-the-height-of-the-location-image\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.open-user-map.com\\\/knowledge-base\\\/adjusting-the-height-of-the-location-image\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.open-user-map.com\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Adjusting the height of the location image\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.open-user-map.com\\\/#website\",\"url\":\"https:\\\/\\\/www.open-user-map.com\\\/\",\"name\":\"Open User Map\",\"description\":\"WordPress Map Plugin\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.open-user-map.com\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.open-user-map.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"fr-FR\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.open-user-map.com\\\/#organization\",\"name\":\"Open User Map\",\"url\":\"https:\\\/\\\/www.open-user-map.com\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\\\/\\\/www.open-user-map.com\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.open-user-map.com\\\/wp-content\\\/uploads\\\/2023\\\/09\\\/icon-256x256-1.png\",\"contentUrl\":\"https:\\\/\\\/www.open-user-map.com\\\/wp-content\\\/uploads\\\/2023\\\/09\\\/icon-256x256-1.png\",\"width\":256,\"height\":256,\"caption\":\"Open User Map\"},\"image\":{\"@id\":\"https:\\\/\\\/www.open-user-map.com\\\/#\\\/schema\\\/logo\\\/image\\\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.open-user-map.com\\\/#\\\/schema\\\/person\\\/d9c8cbe470ae2702b6de61e0f73a7402\",\"name\":\"Daniel Sch\u00f6nherr\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Adjusting the height of the location image - Open User Map","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.open-user-map.com\/fr\/knowledge-base\/adjusting-the-height-of-the-location-image\/","og_locale":"fr_FR","og_type":"article","og_title":"Adjusting the height of the location image - Open User Map","og_description":"Maybe your users like to upload images in portrait mode. On small screens like on a Mobile this could result into unwanted style issues, as the image inside a location bubble need too much space. To prevent this you could use the following CSS code to set a fixed image dimension (e.g. 4:3) and crop &hellip; Continued","og_url":"https:\/\/www.open-user-map.com\/fr\/knowledge-base\/adjusting-the-height-of-the-location-image\/","og_site_name":"Open User Map","article_modified_time":"2023-09-27T07:29:33+00:00","twitter_card":"summary_large_image","twitter_misc":{"Dur\u00e9e de lecture estim\u00e9e":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"TechArticle","@id":"https:\/\/www.open-user-map.com\/knowledge-base\/adjusting-the-height-of-the-location-image\/#article","isPartOf":{"@id":"https:\/\/www.open-user-map.com\/knowledge-base\/adjusting-the-height-of-the-location-image\/"},"author":{"name":"Daniel Sch\u00f6nherr","@id":"https:\/\/www.open-user-map.com\/#\/schema\/person\/d9c8cbe470ae2702b6de61e0f73a7402"},"headline":"Adjusting the height of the location image","datePublished":"2023-02-12T21:38:54+00:00","dateModified":"2023-09-27T07:29:33+00:00","mainEntityOfPage":{"@id":"https:\/\/www.open-user-map.com\/knowledge-base\/adjusting-the-height-of-the-location-image\/"},"wordCount":111,"publisher":{"@id":"https:\/\/www.open-user-map.com\/#organization"},"inLanguage":"fr-FR"},{"@type":"WebPage","@id":"https:\/\/www.open-user-map.com\/knowledge-base\/adjusting-the-height-of-the-location-image\/","url":"https:\/\/www.open-user-map.com\/knowledge-base\/adjusting-the-height-of-the-location-image\/","name":"Adjusting the height of the location image - Open User Map","isPartOf":{"@id":"https:\/\/www.open-user-map.com\/#website"},"datePublished":"2023-02-12T21:38:54+00:00","dateModified":"2023-09-27T07:29:33+00:00","breadcrumb":{"@id":"https:\/\/www.open-user-map.com\/knowledge-base\/adjusting-the-height-of-the-location-image\/#breadcrumb"},"inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.open-user-map.com\/knowledge-base\/adjusting-the-height-of-the-location-image\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.open-user-map.com\/knowledge-base\/adjusting-the-height-of-the-location-image\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.open-user-map.com\/"},{"@type":"ListItem","position":2,"name":"Adjusting the height of the location image"}]},{"@type":"WebSite","@id":"https:\/\/www.open-user-map.com\/#website","url":"https:\/\/www.open-user-map.com\/","name":"Open User Map","description":"Plugin WordPress Map","publisher":{"@id":"https:\/\/www.open-user-map.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.open-user-map.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"fr-FR"},{"@type":"Organization","@id":"https:\/\/www.open-user-map.com\/#organization","name":"Open User Map","url":"https:\/\/www.open-user-map.com\/","logo":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/www.open-user-map.com\/#\/schema\/logo\/image\/","url":"https:\/\/www.open-user-map.com\/wp-content\/uploads\/2023\/09\/icon-256x256-1.png","contentUrl":"https:\/\/www.open-user-map.com\/wp-content\/uploads\/2023\/09\/icon-256x256-1.png","width":256,"height":256,"caption":"Open User Map"},"image":{"@id":"https:\/\/www.open-user-map.com\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/www.open-user-map.com\/#\/schema\/person\/d9c8cbe470ae2702b6de61e0f73a7402","name":"Daniel Sch\u00f6nherr"}]}},"_links":{"self":[{"href":"https:\/\/www.open-user-map.com\/fr\/wp-json\/wp\/v2\/ht-kb\/4440","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.open-user-map.com\/fr\/wp-json\/wp\/v2\/ht-kb"}],"about":[{"href":"https:\/\/www.open-user-map.com\/fr\/wp-json\/wp\/v2\/types\/ht_kb"}],"author":[{"embeddable":true,"href":"https:\/\/www.open-user-map.com\/fr\/wp-json\/wp\/v2\/users\/50"}],"replies":[{"embeddable":true,"href":"https:\/\/www.open-user-map.com\/fr\/wp-json\/wp\/v2\/comments?post=4440"}],"version-history":[{"count":0,"href":"https:\/\/www.open-user-map.com\/fr\/wp-json\/wp\/v2\/ht-kb\/4440\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.open-user-map.com\/fr\/wp-json\/wp\/v2\/media?parent=4440"}],"wp:term":[{"taxonomy":"ht_kb_category","embeddable":true,"href":"https:\/\/www.open-user-map.com\/fr\/wp-json\/wp\/v2\/ht-kb-category?post=4440"},{"taxonomy":"ht_kb_tag","embeddable":true,"href":"https:\/\/www.open-user-map.com\/fr\/wp-json\/wp\/v2\/ht-kb-tag?post=4440"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}