I want to show an image in a WebBrowser
<html>
<body style="margin:0px;padding:0px;border:0px">
<img src="http://phaseoneimageprofessor.files.wordpress.com/2010/09/logo_image_professor_22.jpg"/>
</body>
</html>
I want width of image grow and be the same as width of visible window (it's not full screen). it's height should grow too without loosing its shape.
var htmlString = "<html><body style="margin:0px;padding:0px;border:0px"><img src="http://phaseoneimageprofessor.files.wordpress.com/2010/09/logo_image_professor_22.jpg"/></body></html>"; //It's missing some backslashes, you got the idea.
webBrowser.NavigateToString(htmlString);
currently it just appears at the corner of the page, and this is not what I want.
How can I achieve that? thanks.
<img src="image.jpg" width="100%" />
By default in HTML if you specify either height OR width (but not both) for an image, the other attribute will be scaled automatically to keep the same aspect ratio.
Related
I want to set the width of an Image to the width of the screen with 20 DP on both sides with the original aspect ratio in a XAML file (Xamarin Form), I hope it can be device-independent, which on any device, the Image width is the same as the screen width with 20 DP on both sides while maintaining its aspect ratio.
I tried WidthRequest, but it doesn't work.
'<Image x:Name="myImgBox"
HorizontalOptions="Center" />'
Thank you for the help!
SCREENSHOT of the PROBLEM
If you set the HorizontalOptions to FillAndExpand, the image will fill the space available horizontally. You can also change the VerticalOptions.
<Image Source="yourImage.png"
HorizontalOptions="FillAndExpand"
Aspect="Fill" > </Image>
The Aspect property determines how the image will be scaled to fit the display area:
Fill - Stretches the image to completely and exactly fill the display area. This may result in the image being distorted.
AspectFill - Clips the image so that it fills the display area while preserving the aspect (ie. no distortion).
AspectFit - Letterboxes the image (if required) so that the entire image fits into the display area, with blank space added to the top/bottom or sides depending on whether the image is wide or tall.
I am working on a WinForm (weather app) that use the IE Webbrowser control which displays a weather Map image from Weather Underground. My problem is that it shows a white margin (or padding) of about 5 px or so, and I can not seem to figure out how to get rid of this white space.(Take a look at image)
I have tried just the Chrome Browser and there is no white space (margin) around the image, however if I try my IE Browser I get the white space(margin). Is there a setting in IE that sets a Top / Left Margin?
I don't particularly won't to use another webcontrol like Chromium or some other Third party web control, but I will if I have to or either I'll use something a picturebox if I have to. I was just trying to use the webcontrol.
Image of IE browser control
All browsers have default margins on body but Chrome seems smart enough to not use them when viewing an image instead of HTML. Perhaps inject body { margin: 0; } using How to inject CSS in WebBrowser control?
If you load an image in IE and then use F12, it produces:
<html>
<head></head>
<body>
<img src="file:///C:/Users/Public/Pictures/Sample%20Pictures/Chrysanthemum.jpg">
</body>
</html>
And if you manually add margin: 0; to the body the border goes away.
I am working on optimizing page load
First option i went for is base64 conversion
I have 18 small images to be loaded in home page
Since base64 is 1.3x the actual image size i went for image sprites
After spriting the images, i am able to use it for replacing background-image , background-position for div, but i am not able to use sprited image for replacing img and asp:image tags. I need to have them as <asp:image> as there are some code behind functions attached to it
You can add transparent images for all asp:Image controls. They will render as HTML images. And then you should make sure that you add the correct css class with the appropriate sprite for each.
See an example at http://jsfiddle.net/9wo2mL32. Also, make sure you add width and height to the class (or to the asp:Image control):
<asp:Image ID="imgImage" runat="server" Height="100" Width="100" ...
Yes you can use sprites on images, the key points is to add height/width and an empty/transparent image 1pixel x 1pixel on the src so can load something and show something as image tag, because with out valid src browsers may show error img, or nothing
The rendered results can be like:
<img class="rgoto" src="spacer.gif" height="9" width="8" >
and style :
img.rgoto {
background: url(sprite.gif) no-repeat -230px -20px;
height: 9px;
width: 8px;
}
I have some CSS (Below) defining an images size
#latestImages img
{
height: 95px;
width: auto;
}
This is affecting these images:
<img src="#images.ImagePath" alt="#images.NameOfImage" />
When i set an onmouseover event to this image like so:
<img src="#images.ImagePath" alt="#images.NameOfImage" onmouseover="this.width=100;this.height=100;" onmouseout="this.width=200;this.height=200;"/>
The images height and width do change in the html when the source is viewed but there is no visible change, but when i removed the css the changes did occur.
Does anyone know why this is? And is there anything I can do different to keep the css as is and have javascript enlarging the image?
Thanks in advance!
You can use this format in your onmouseover handler: this.style.width="50px".
Or better yet, don't put your JS in your HTML, and write a function for what you are trying to do.
onmouseover="this.style.width='100px';this.style.height='100px';"
onmouseout="this.style.width='200px';this.style.height='200px';"
Styles need units. In this case px. Otherwise it could be pt, in, or em.
I'd like to use ImageResizer.net for a complex Pan/Zoom/Scale operation:
Here's a pure CSS way to crop/pan/zoom an image:
<div style="width: 300px; height: 100px; overflow:hidden;">
<img height="200" style="position:relative; top: -50px; left: 5px" src="http://placehold.it/250x250"/>
</div>
(see: http://jsfiddle.net/tbmBt/18/ for an example of this)
While this works great in most modern browsers, it is brittle, chatty, and broken in some email clients (and probably older browsers).
So... once a user is "done" with some HTML for an email (or old browser), I'd like to pull all those CSS attributes and make an image that takes them all into account, producing a new image of the correct dimensions...
I have basically already worked this out:
Scale source image to the correct dimensions (based on "height"
attribute of IMG tag)
Crop image based on image offsets and div
container dimensions.
Pad image based on cropped image size and
container dimensions. (When no padding is needed, use JPEG at 95%
quality, when padding is needed, use PNG, with bgcolor transparent).
This works great, but I'd prefer to use the URL API and to only have to process the image once instead of "three" times.
I believe that I could achieve this in one step using an affine transformation. At this point, I'm thinking that would require a new custom plugin (and if that's the only way to achieve what I'm after, I might even implement it myself and Open Source it..).
Any idea about a more efficient way to do what I'm trying to do?
Yes, arbitrary affine transformations can be done through the URL API, but you have to know the order of events and you'll have to split the cropping and padding into separate commands.
Cropping happens before resizing, so you'll need to figure out your viewport dimension and split them into two sets of coordinates.
1) Crop values are x1,y1,x2,y2, in source image coordinates. You can use cropxunits=100 and cropyunits=100 to make x1,y1,x2,y2 percentages of width/height respectively if you don't know the viewport coordinates in image dimensions. You can also use arbitrary values for cropxunits and cropyunits to make the math easier.
Negative crop values will be relative to bottom-right instead of top left, so after copying the absolute value of negative (or, for far right values, the excess amounts) into variables for padding later, set them to zero or width/height/cropxunits/cropyunits.
2) Add padding if needed with margin=left, top, right, bottom. Units are display pixels, not source pixels, so these values should be unscaled.
3) Scale - This is where you apply width=x&height=y&mode=max to get the appropriate display size. Left off, it will show 1:1 zoom, which may or may not be desired. x and y here should be the desired width/height of the image in display pixels, NOT the canvas.
See full command reference for details.
You can definitely do this as a plugin, but I'd suggest doing a javascript implementation first, then seeing if you want to bother putting the wrapping on the server in plugin form. Either way, I've had this question a few times and an MIT-licensed code sample would be very helpful to the community.