{"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\/de\/knowledge-base\/adjusting-the-height-of-the-location-image\/","title":{"rendered":"Anpassen der H\u00f6he des Standortbildes"},"content":{"rendered":"<p>Vielleicht laden Ihre Nutzer gerne Bilder im Hochformat hoch. Auf kleinen Bildschirmen wie dem eines Mobiltelefons kann dies zu unerw\u00fcnschten Stilproblemen f\u00fchren, da das Bild innerhalb einer Positionsblase zu viel Platz ben\u00f6tigt. <\/p>\n\n\n\n<p>Um dies zu verhindern, k\u00f6nnen Sie den folgenden CSS-Code verwenden, um eine feste Bildgr\u00f6\u00dfe (z. B. 4:3) festzulegen und das Bild darin zu beschneiden oder zu skalieren:<\/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>Sie k\u00f6nnen mit der Option <strong>Seitenverh\u00e4ltnis<\/strong> oder versuchen <strong>Objektpassung: Abdeckung<\/strong> um das Bild zuzuschneiden.<\/p>\n\n\n\n<p>Wir planen, mit einem zuk\u00fcnftigen Update eine neue UX f\u00fcr die mobile Ansicht bereitzustellen, so dass dies in der Zwischenzeit nur eine vor\u00fcbergehende schnelle L\u00f6sung sein kann.<\/p>","protected":false},"excerpt":{"rendered":"<p>Vielleicht laden Ihre Nutzer gerne Bilder im Hochformat hoch. Auf kleinen Bildschirmen, wie z.B. auf einem Handy, k\u00f6nnte dies zu unerw\u00fcnschten Stilproblemen f\u00fchren, da das Bild innerhalb einer Positionsblase zu viel Platz ben\u00f6tigt. Um dies zu verhindern, k\u00f6nnen Sie den folgenden CSS-Code verwenden, um ein festes Bildformat (z. B. 4:3) festzulegen und zu beschneiden ... <a href=\"https:\/\/www.open-user-map.com\/de\/knowledge-base\/adjusting-the-height-of-the-location-image\/\">Fortsetzung<\/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 v26.8 - 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\/de\/knowledge-base\/adjusting-the-height-of-the-location-image\/\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\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\/de\/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=\"Gesch\u00e4tzte Lesezeit\" \/>\n\t<meta name=\"twitter:data1\" content=\"1\u00a0Minute\" \/>\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\":\"de\"},{\"@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\":\"de\",\"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\":\"de\"},{\"@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\":\"de\",\"@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":"Einstellen der H\u00f6he des Standortbildes - 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\/de\/knowledge-base\/adjusting-the-height-of-the-location-image\/","og_locale":"de_DE","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\/de\/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":{"Gesch\u00e4tzte Lesezeit":"1\u00a0Minute"},"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":"de"},{"@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":"Einstellen der H\u00f6he des Standortbildes - 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":"de","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 Karten-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":"de"},{"@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":"de","@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\/de\/wp-json\/wp\/v2\/ht-kb\/4440","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.open-user-map.com\/de\/wp-json\/wp\/v2\/ht-kb"}],"about":[{"href":"https:\/\/www.open-user-map.com\/de\/wp-json\/wp\/v2\/types\/ht_kb"}],"author":[{"embeddable":true,"href":"https:\/\/www.open-user-map.com\/de\/wp-json\/wp\/v2\/users\/50"}],"replies":[{"embeddable":true,"href":"https:\/\/www.open-user-map.com\/de\/wp-json\/wp\/v2\/comments?post=4440"}],"version-history":[{"count":0,"href":"https:\/\/www.open-user-map.com\/de\/wp-json\/wp\/v2\/ht-kb\/4440\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.open-user-map.com\/de\/wp-json\/wp\/v2\/media?parent=4440"}],"wp:term":[{"taxonomy":"ht_kb_category","embeddable":true,"href":"https:\/\/www.open-user-map.com\/de\/wp-json\/wp\/v2\/ht-kb-category?post=4440"},{"taxonomy":"ht_kb_tag","embeddable":true,"href":"https:\/\/www.open-user-map.com\/de\/wp-json\/wp\/v2\/ht-kb-tag?post=4440"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}