Как установить максимальную ширину и высоту для листовок

Question

У меня есть веб-сайт, на котором пользователь может установить содержимое всплывающей подсказки (свободный ввод текста).

Поскольку HTML можно использовать в содержимом всплывающей подсказки, например, HTML можно установить в качестве содержимого всплывающей подсказки. : var html = '<img src="https://www.somesite.com/someimage.jpg">'; marker.bindTooltip(html);

Если изображение очень большое, показ всплывающей подсказки будет таким же, как и изображение, потенциально больше, чем окно.

Я хотел бы установить максимальную ширину и высоту всплывающей подсказки. Такие свойства существуют для всплывающих окон (maxWidth, maxHeight options), но не для слишком всплывающих окон.

Я пытался добавить их в определение всплывающей подсказки CSS, но он ничего не делает:

.leaflet-tooltip {
    max-width: 128px;
    max-height: 128px;
}

Любой простой способ сделать это? Спасибо

Answer 1

Добавьте к изображению 'id' или 'class' и установите для него максимальную высоту и максимальную ширину.

js

var html = '<img id="image" src="https://www.somesite.com/someimage.jpg">';
marker.bindTooltip(html);

css

#image {
  max-width: 128px;
  max-height: 128px;
}

См. Мой Codepen для примера: https://codepen.io/amapolauditiva/pen/bGVpWdQ

Ответ расширен

Также вы можете разместить все изображения внутри подсказки:

.leaflet-tooltip img {
  max-width: 128px;
  max-height: 128px;
}