{"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\/es\/knowledge-base\/adjusting-the-height-of-the-location-image\/","title":{"rendered":"Ajuste de la altura de la imagen de localizaci\u00f3n"},"content":{"rendered":"<p>Puede que a tus usuarios les guste subir im\u00e1genes en modo vertical. En pantallas peque\u00f1as, como las de los m\u00f3viles, esto podr\u00eda dar lugar a problemas de estilo no deseados, ya que la imagen dentro de una burbuja de ubicaci\u00f3n necesita demasiado espacio. <\/p>\n\n\n\n<p>Para evitarlo, puede utilizar el siguiente c\u00f3digo CSS para establecer una dimensi\u00f3n de imagen fija (por ejemplo, 4:3) y recortar o escalar la imagen en su interior:<\/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>Puedes jugar con el <strong>relaci\u00f3n de aspecto<\/strong> o intente <strong>ajuste al objeto: cubierta<\/strong> para recortar la imagen.<\/p>\n\n\n\n<p>Con una futura actualizaci\u00f3n estamos planeando proporcionar una nueva UX para la vista m\u00f3vil, por lo que esto puede ser s\u00f3lo una soluci\u00f3n r\u00e1pida temporal mientras tanto.<\/p>","protected":false},"excerpt":{"rendered":"<p>Puede que a tus usuarios les guste subir im\u00e1genes en modo vertical. En pantallas peque\u00f1as como las de los m\u00f3viles, esto podr\u00eda dar lugar a problemas de estilo no deseados, ya que la imagen dentro de una burbuja de ubicaci\u00f3n necesita demasiado espacio. Para evitar esto, puede utilizar el siguiente c\u00f3digo CSS para establecer una dimensi\u00f3n de imagen fija (por ejemplo, 4:3) y recortar ... <a href=\"https:\/\/www.open-user-map.com\/es\/knowledge-base\/adjusting-the-height-of-the-location-image\/\">Contin\u00faa en<\/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\/es\/knowledge-base\/adjusting-the-height-of-the-location-image\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\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\/es\/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=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data1\" content=\"1 minuto\" \/>\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\":\"es\"},{\"@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\":\"es\",\"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\":\"es\"},{\"@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\":\"es\",\"@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":"Ajuste de la altura de la imagen de localizaci\u00f3n - 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\/es\/knowledge-base\/adjusting-the-height-of-the-location-image\/","og_locale":"es_ES","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\/es\/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":{"Tiempo de lectura":"1 minuto"},"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":"es"},{"@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":"Ajuste de la altura de la imagen de localizaci\u00f3n - 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":"es","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 de mapas de WordPress","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":"es"},{"@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":"es","@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\/es\/wp-json\/wp\/v2\/ht-kb\/4440","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.open-user-map.com\/es\/wp-json\/wp\/v2\/ht-kb"}],"about":[{"href":"https:\/\/www.open-user-map.com\/es\/wp-json\/wp\/v2\/types\/ht_kb"}],"author":[{"embeddable":true,"href":"https:\/\/www.open-user-map.com\/es\/wp-json\/wp\/v2\/users\/50"}],"replies":[{"embeddable":true,"href":"https:\/\/www.open-user-map.com\/es\/wp-json\/wp\/v2\/comments?post=4440"}],"version-history":[{"count":0,"href":"https:\/\/www.open-user-map.com\/es\/wp-json\/wp\/v2\/ht-kb\/4440\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.open-user-map.com\/es\/wp-json\/wp\/v2\/media?parent=4440"}],"wp:term":[{"taxonomy":"ht_kb_category","embeddable":true,"href":"https:\/\/www.open-user-map.com\/es\/wp-json\/wp\/v2\/ht-kb-category?post=4440"},{"taxonomy":"ht_kb_tag","embeddable":true,"href":"https:\/\/www.open-user-map.com\/es\/wp-json\/wp\/v2\/ht-kb-tag?post=4440"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}