I was trying to avoid the lag that comes with downloading an image, saving it as a file, and then putting it into a WebCanvas or WebImage, so I built a simple custom web control following the instructions in the WebControlSDK PDF.
The HTML for this control is set as follows:
Me.html = "<img width=""" + Str(Me.Width) + """ height=""" + str(Me.height) + """ src=""" + path + """>"
which at runtime becomes something like this:
<img width="300" height="300" src="www.foo.bar/image>"
This works fine; it displays the image, but doesn’t scale it. What I really want to do is scale the image proportionally in its frame, keeping the height of the containing control. In a plain old HTML page, I can do this in CSS with the following style:
.myImage {
width: auto;
max-height: 100%;
}
But if I put this code into the control’s SetupCSS event:
Styles(0).Value("visibility") = "visible"
Styles(0).Value("width") = "auto"
Styles(0).Value("max-height") = "100%"
It doesn’t work.
What am I missing here? Is Xojo ignoring my style (most people ignore my style, so I’m used to it) or is something else wrong with what I’m doing?
Here is an image of what I get out of an HTML page using this style, for different image aspect ratios:
And here is what Xojo produces:
Thanks for any help and advice!
You can add the style to your HTML this way :
<style>
.myImage {
width: auto;
max-height: 100%;
border: 5px solid red;
}
</style> <p> <img class="myImage" width="300" height="300" src="http://www.fontmenu.com/printouts/ZCharlotte.gif">
You can also use a standard Xojo WebStyle and indicate its name in the class name.
I added the border to have a better visual confirmation. Since you put width and height, I do not think max-width will do anything, neither will width: auto.
I often do something like this for responsive design :
.myImage {
width: 100%;
max-width: 300px;
border: 5px solid yellow;
}
This way the picture starts at 300 pix high but can be resized down. Leaving out width keeps the aspect ratio.
Hi Michel,
Thanks for your response. If I don’t put width and height in the ![]()
tag, then the image is not scaled and I see only a small portion of it in the frame; that’s why I’m using width and height.
And I don’t see a way of using a standard Xojo WebStyle, because WebStyles offer only a small subset of available CSS properties, and does not include properties like width or max-width. Am I missing something, and there’s a way to add other properties not shown in the “Add Property” drop down?
I’ve tried your technique of putting the CSS into the SetupHTML event. It works the first time, but if I change one of the images (by updating the html returned), then all the images on the page revert to incorrect aspect ratios. Very confusing.
I’m not necessarily trying for responsive design here, I just need several images on a page, all the same height, that can change their contents in response to various events. So far I haven’t been successful.
[quote=236247:@Charles Weger]Hi Michel,
Thanks for your response. If I don’t put width and height in the ![]()
tag, then the image is not scaled and I see only a small portion of it in the frame; that’s why I’m using width and height.
And I don’t see a way of using a standard Xojo WebStyle, because WebStyles offer only a small subset of available CSS properties, and does not include properties like width or max-width. Am I missing something, and there’s a way to add other properties not shown in the “Add Property” drop down?
I’ve tried your technique of putting the CSS into the SetupHTML event. It works the first time, but if I change one of the images (by updating the html returned), then all the images on the page revert to incorrect aspect ratios. Very confusing.
I’m not necessarily trying for responsive design here, I just need several images on a page, all the same height, that can change their contents in response to various events. So far I haven’t been successful.[/quote]
Then put the style in App.HTMLHeader.
After putting this aside due to other fire-fighting, I came back to it. I decided to do the scaling on the server (in PHP). Much simpler, and fewer wasted bits.