Back to the Shapespark home page

Responsive image size inside iframe

Greetings.
I have hosted several images in https://cloudinary.com/ and I generate the iframes with https://www.iframe-generator.com/. I copy and paste the result in the HTML extensions window and I can open them well but I can’t make the image fit into the iframe! Note: the iframe responds well to the size parameters by % but I need the image always to fit into the iframe, can someone explain me how I can do that?

Are you specyfing the size using the iframe attributes (<iframe width="X" height="Y"...) or an inline CSS style (<iframe style="width: X; height:Y" ...)? You have to use the latter, because Shapespark viewer provides default responsive width and height for iframes using CSS, and the defaults can be overriden only with an inline CSS style. Furthermore, CSS gives you much more flexibility, as it allows you to use viewport-relative width/height units: vw and vh.

If you paste your HTML iframe snippet here, I’ll try to give you a more precise advice on how to improve the image sizing.

1 Like

thanks @wojtek,
this is the hosting address of a sample image

and this is the iframe generated with https://www.iframe-generator.com/
(without ><)
iframe src=“https://res.cloudinary.com/arquitecto/image/upload/v1598376220/sample.jpg” style=“border:0px #ffffff none;” name=“myiFrame” scrolling=“no” frameborder=“1” marginheight=“0px” marginwidth=“0px” height=“400px” width=“600px” allowfullscreen></iframe

This is the result of the tour you can see here
https://all360.shapespark.com/shapespark-example-room-christmas/

This is how it looks on PC

This is how it looks in Android
portrait

landscape

The iframe answer is correct but the image inside keeps its size, how can I make the image fit into the iframe and not have to use the scroll bars

Regards,
Jorge

@jorgearq, an easier way to embed an image is to use the <img> HTML element instead of <iframe>. In Shapespark viewer HTML label has a default style for <img> elements which makes their width & height adjust automatically to the viewport size (the image width takes 75% of the viewport width, and the image height is scaled to maintain the image aspect ratio).

Please use:

<img src=“https://res.cloudinary.com/arquitecto/image/upload/v1598376220/sample.jpg”>

instead of the <iframe ....></iframe> .

2 Likes

Thanks @Wojtek. There is a similar HTML resource for videos?

Yes, there is a <video> HTML element, however it requires you to host the video on your own.

If you want to place a YouTube video, use <iframe> without any width and height attributes. Shapespark viewer provides default responsive size also for <iframe> elements embedded inside an HTML label, and assumes <iframe>s are primarly used for video embeds: by default the width of <iframe> is adjusted to 75% of the viewport width, and height is scaled to maintain 16:9 aspect ratio (typical for videos).

1 Like

Thanks. I got it about video html requires host it in a private server