displaying the plans without distorting the aspect ratio?

[rolfschmidli]

Hi
Is there no way of displaying the plans without distorting the aspect ratio?
Rolf

[nicosandller]

@rolfschmidli I'm not sure I understand the situation you are describing! Can you share some pictures / screenshots of this situation / problem?

[GadgetStu]

Not sure if ti helps @rolfschmidli but I have my card in a Sidebare layout and use the card_mode code below to help scaling on all devices I use it on, phonne, small tablet and PC screen (all in portrait, the first section and last 2 are for soem color overriding):

card_mod:
style: |
ha-card {
--fp-skin-wall-width: 8 !important;
--fp-skin-badge-border: #000000 !important;
--fp-skin-badge-bg: #000000 !important;

  /* Centering Logic */
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  margin: auto !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;

  /* Responsive Scaling Rules */
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  max-height: calc(100vh - 80px) !important; /* Prevents spilling past top/bottom headers */
  aspect-ratio: 1913 / 4123 !important;   /* matches your canvas width/height */
  overflow: hidden !important;
  padding: 0 !important;
}

.card-content, #floorplan {
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  overflow: hidden !important;
}

#floorplan svg, .card-content svg {
  display: block !important;
  width: auto !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: 100% !important;
}

.fp-opening-door {
  stroke: #ff0000 !important;
}
.fp-opening-window {
  stroke: #ff0000 !important;
}