Refactor aspect-ratio logic.

src/scss/card.scss

@@ -9,21 +9,31 @@
   filter: brightness(50%);
 }
 
-.container {
+div.main {
   position: relative;
   overflow: auto;
   width: 100%;
   height: 100%;
   margin: auto;
   display: flex;
+  align-items: center;
   justify-content: center;
 
   // Need to apply the border radius on the container level, as the ha-card has
   // overflow visible in order to allow a submenu to extend beyond the card
   // boundary.
   border-radius: var(--ha-card-border-radius, 4px);
+
+  // Include the borders in the sizing (to keep the triggered warning pulse
+  // visible in fullscreen).
+  box-sizing: border-box;
+
+  // Hide scrollbar: Firefox
+  scrollbar-width: none;
+  // Hide scrollbar: IE and Edge
+  -ms-overflow-style: none;
 }
-.container.triggered {
+div.main.triggered {
   @keyframes warning-pulse {
     0% {
       border: solid 1px rgba(0,0,0,0);
@@ -38,39 +48,11 @@
   animation: warning-pulse 5s infinite;  
 }
 
-.frigate-card-contents {
-  width: inherit;
-  height: inherit;
-  margin: auto;
-  overflow: auto;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-
-  // Include the borders in the sizing (to keep the triggered warning pulse
-  // visible in fullscreen).
-  box-sizing: border-box;
-
-  // Hide scrollbar: Firefox
-  scrollbar-width: none;
-  // Hide scrollbar: IE and Edge
-  -ms-overflow-style: none;
-}
-
 /* Hide scrollbar for Chrome, Safari and Opera */
-.frigate-card-contents::-webkit-scrollbar {
+div.main::-webkit-scrollbar {
   display: none;
 }
 
-/* When forcing aspect ratio absolute positioning is required */
-.frigate-card-contents.absolute {
-  position: absolute;
-  top: 0px;
-  right: 0px;
-  bottom: 0px;
-  left: 0px;
-}
-
 /* The 'hover' menu mode is styling applied outside of the menu itself */
 frigate-card-menu[data-style='hover'] {
   z-index: 1;