How to automatic resize oh-image component within oh-cell?

Add-ons UIs
1

Hi,

I am using the following code. It looks fine on desktop, but leaves some empty space if the page is showed on smaller screens.

              - component: oh-cell
                config: {}
                slots:
                  background:
                    - component: oh-image
                      config:
                        lazy: true
                        url: /static/images/KK.jpg
                        style:
                          object-fit: fit
                          max-width: 100%
                          max-height: 100%
                        class:
                          - card-opened-fade-out
                  header:
                    - component: f7-block
                      config:
                        style:
                          display: flex
                          flex-direction: row
                          align-items: center
                      slots:
                        default:
                          - component: Label
                            config:
                              text: testing
                              style:
                                textalign: right

On bigger, it is like below:

image
image307×150 56.2 KB

But, on smaller screen, it is like below:

image
image187×148 26.4 KB

My question is, how do make the image fully cover the cell without leaving space below when the cell width is shortened? TQ

2

The problem here is the compound nature of the oh-cell. By the time you have added an oh-image to the background slot of the cell there are numerous html elements stacked in such a way that it is pretty difficult to get css that will size the image correctly. Presonally, I would actually not use an oh-image for this, but just use a div and put the image in the background using css. Then the only extra element you have to deal with is the additional div that is added when a cell has a background. That’s a little trickier and requires adding a stylesheet to the cell with more complicated than usual css selector:

- component: oh-cell
  config:
    stylesheet: |
      div:has(.back-image){
        height: 100%;
      }
  slots:
    background:        
      - component: div
        config:
          style:
            background-image: url('/static/images/KK.jpg')
            background-size: cover
            height: 100%
            width: 100%
          class:
            - back-image
            - card-opened-fade-out

The background-size: cover on the div is all you need to keep the image always filling the space no matter what aspect ratio the cell has.

I’ve added the custom class back-image to that div so that I can specifically target the extra background div with the css selector div:has(.back-image) (which just says “select any div element that contains another element with the class ‘back-image’”). This extra stylesheet css is the only way that your div element with the background image is going to have a vertical size greater than 0 becuase otherwise it is just an empty element.

1 Like
3

Great it works