HTML Image Problem

1

Hi, I am trying to insert some images into the scene using HTML label, but I couldn’t get the result I wanted.

First, here is the original code I am using, simply using image tag.

<img src="https://www.blitzmultimediadesign.com/resources/AZ2/Science/Synagis%20Launch/JPG/v2/1.jpg">
<br>
<img src="https://www.blitzmultimediadesign.com/resources/AZ2/Science/Synagis%20Launch/JPG/v2/2.jpg">
<br>
<img src="https://www.blitzmultimediadesign.com/resources/AZ2/Science/Synagis%20Launch/JPG/v2/3.jpg">
<br>
<img src="https://www.blitzmultimediadesign.com/resources/AZ2/Science/Synagis%20Launch/JPG/v2/4.jpg">

Here is the result

Result 1

All the source images are the same width but the result shown here are weirdly scaled, so I try to change them using inline CSS like this.

<img style="width:100%;height:auto" src="https://www.blitzmultimediadesign.com/resources/AZ2/Science/Synagis%20Launch/JPG/v2/1.jpg">
<br>
<img style="width:100%;height:auto" src="https://www.blitzmultimediadesign.com/resources/AZ2/Science/Synagis%20Launch/JPG/v2/2.jpg">
<br>
<img style="width:100%;height:auto" src="https://www.blitzmultimediadesign.com/resources/AZ2/Science/Synagis%20Launch/JPG/v2/3.jpg">
<br>
<img style="width:100%;height:auto" src="https://www.blitzmultimediadesign.com/resources/AZ2/Science/Synagis%20Launch/JPG/v2/4.jpg">

Here is the result

Result 2

The width of the images has been fixed, but the height isn’t scaled correctly. Is there something wrong with my code?

2

Could you send us a link to your scene (via PM if the scene isn’t public)? The first method - using the default styling provided by Shapespark - should give you the result you expect: consistent width and maintaining the image aspect ratio. If it does not then it’s an issue we’d like to investigate.

3

Hi wojtek, thanks for the reply. The actual scene with the problem has been fixed by trimming every image with the same width and height. Here is another test scene with the original images that I use.

Demo (shapespark.com)

4

Thanks for sending the scene.

The reason why the widths are not consistent is that the default styling rules that Shapespark provides for images in an HTML label only downscale images, but don’t upscale them. If an image is small its original resolution is kept, if the image is large it will be downscaled to 75% of the viewport width.

You can either use images in higher resolution in the HTML image, or if upscaling is not an issue you can add style="min-width: 75vw" to each of the img elements.

1 Like