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.
this is the hosting address of a sample image
and this is the iframe generated with https://www.iframe-generator.com/
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
This is how it looks on PC
This is how it looks in Android
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
@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).
instead of the
<iframe ....></iframe> .
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
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).
Thanks. I got it about video html requires host it in a private server