Several javascript code listings have been posted in the forum which will resize a web image to the size of the image container. That does work, but the problem is that the image is displayed at the original size and then is resized to fit the container, which doesn’t look very good. Setting the image visibility off while resizing or moving the image offscreen while doing the resizing doesn’t seem work since the image resets itself when made visible or moved. So, I’m wondering if anyone has found a way to get the image at the desired size without it being displayed and then redrawn.
There are many ways to display an image.
What I try to report here is how to use the background-image CSS property.
Using background-image combined with other CSS properties related to the background you can instruct the browser to resize the image as required.
Note that this can be used in general for any webcontrol: weblabels, webbuttons and so on.
First you must have an image that the browser can load using an url: if the image is in your application you can store the image in a webfile or webimage and use the URL property of the webfile/webimage.
Now you must tell the browser that you are using the image referenced by the url as the background of the webcontrol.
You can do this task using this code:
Sub SetBGroundImage(Extends Ctl As WebControl, ImageURL As String)
if ImageURL <> "" Then
Ctl.ExecuteJavaScript(kBgImageJs.Replace("%1", Ctl.ControlID).Replace("%2", ImageURL))
Else
Ctl.ExecuteJavaScript(kBgImageNoneJs.Replace("%1", Ctl.ControlID))
end if
End Sub
This function use a string constant named kBgImageJs containing the required javascript code used to apply the image as a background for the control.
The kBgImageJs value is:
var el = document.getElementById('%1');
if (el) {
el.style.setProperty('background-image', 'url(%2)', 'important');
el.style.setProperty('background-repeat','no-repeat');
el.style.setProperty('background-origin','content-box');
el.style.setProperty('background-size','contain');
el.style.setProperty('background-position','center');
}
The kBgImageNoneJs constant is used to remove the background and is defined as:
[code]var el = document.getElementById(’%1’);
if (el) {
el.style.setProperty(‘background-image’, ‘none’, ‘important’);
}
[/code]
If your page has a weblabel named mylabel and a webpicture named mypicture you can use the function like this:
mylabel.SetBGRoungImage(mypicture.url)The browser fills the area occupied by mylabel with the image contained in myimage scaling the image contents and mantaining the proportions of the image.
If you want to remove the image i.e. the background from the webcontrol:
mylabel.SetBGRoungImage("")Regards.
1 Like
Wow, that works perfectly. Thanks.
Kevin
The image format can be of any type supported by the browser, svg for example.
The image also scale “live” with the control.
Using this technique I have removed all webimageview controls from my pages and containers.
Things are getting fun when you start applying other CSS properties like transform.
Using this property applied to the control you can, for example, rotate the control with the contained background creating very appealing effects.