How can I change the oh-image-card width?

Setup, Configuration and Use Widgets
1

Hello
I do have on my main-page an image created. Now I have seen in the configuration I can change with “Width” the size of the image. Unfortunately only in 5% steps.
Due to the fact I have another image at the side with a different size, I need to change the width in single % like 67% for example.

How can I do this?

component: oh-image-card
config:
  item: MyPicture
  lazy: true
  lazyFadeIn: false
  noBorder: true
slots: null
2

This is not an actual limitation. Can you provide more detail? Show exactly how you are trying to set the width. Show the code for this “other image”. Post some screen shots demonstrating what you see on your setup.

3

I have to image, side by side. Image on the left has this code:

component: oh-image-card
config:
  item: RTSPHTTPIPCamera_CamEG_MJPEGURL_CamEG
  lazy: true
  lazyFadeIn: false
  noBorder: true
  style:
    padding-left: 0%
    padding-right: 0%
    width: 95%

Image on the right has this code:

component: oh-image-card
config:
  item: RTSPHTTPIPCamera_CamOG_MJPEGURL_CamOG
  lazy: true
  lazyFadeIn: true
  noBorder: true
  width: "30"

On the Mainscreen to bottom of both images are not leveled and looks pretty ugly like this:
Image

When changing the width by 5% than it does not work because 5% are too much to get it equally.

4

To begin with, you are defining your image widths in two different ways and this has two different results. On your left image you have added a style property to the image configuration, this allows you to adjust the css style of the element, and should give you full control over the size.

On your right image you have set the width property within the configuration itself. If you were using just an oh-image that width configuration would work (for the most part) because it is passed to the width attribute of the <img> tag that hold the image. That doesn’t work in the case of the oh-image-card however, because the card has it’s own additional css style for the width of its image that overrides the tag’s attribute (which is part of the main function of css).

So, first things first. You want to change the definition of the right image card to look more like the left card with the style property.

Now that you have better control over the image sizes you can think about how to actually set them to the same height. Element size in css can actually become a little tricky at times, so if you’re going to be doing this a lot, you might want to find any one of the hundreds of online tutorials to get a handle on some of the details. However, here’s some info relative to this particular case:

  1. height is a perfectly valid property in css so, if you know the height in some absolute unit such as pixels, you can just set both images to that height. This will most likely distort the image unless you also tell css to change the width:
style:
  height: 200px
  width: auto
  1. You can continue to try and change the % width of the images until you have something that matches, but this will break pretty easily if the images change size or the cards the images are in change size. It’s important to note: when you set a height or a width of an element to a % value that means % of the parent element (the container that element is in). In the case of the image card, the html structure looks like this:
<div class="card no-border">
  <div class="oh-image-card card-content">
    <img url=...>

the image is in a <div> container which is also in another <div> container. So, if you set the image to have a width of 50% that is not half the width of the original image, that is half the width of the card that image is in.

5

Thank you very much for the good explenation - it works perfectly right now!

:smiley: