So, for an Image in react-native, one can set alignSelf in a StyleSheet or one can use resizeMode in the Image tag. What's the difference in usage?
My understanding of it is, that you have to mentally separate the View - or 'box' in css box model terms - and the rendered image it contains. All the styling you define applies to the box. The resizeMode determines how the actual image data is rendered into that box.
AlignSelf defines how the image is placed within the parent container and makes possible to override the align-items value for specific flex items.
ResizeMode is similar to css object-fit and defined how the image should fill its own container.
Related
There is requirement where parsys should be added on top of an image. It is like a background image with the provision of parsys so that other components can be dragged and dropped on top of it. I am using html5smartimage for image component. But, no clue yet on how I can get the parsys on top of the image. Please help if you find any ideas. Thanks.
is the image authorable? If so, how do you intend to provide click-area for the authors to change the image vs edit items in the parsys.
If the image isn't authorable, just target the CSS for your parsys and set the image.
If the image is authorable, in edit mode you want the image to be distinct from the parsys and have separate clickable areas. Then in preview/disabled modes you would generate the actually desired markup & CSS to position the parsys content over the background image.
Using GWT I am trying to create a row of images with text centered below them. There isn't much detail on GWT online so I'm having a difficult time. The image should also be a hyperlink.
You can achieve this layout using standard HTML and CSS. The most obvious solution is to use floating divs which contain an image and its text, with "text-align: center" rule applied to the div.
In GWT you can achieve this either through a Ui:Binder, or, if the images are dynamic, by creating a custom widget to represent each image with its text.
The alternative solution is to use a HorizontalPanel widget and add images and text inside, which is an equivalent of using a table to achieve your desired layout. This solution is not responsive, though.
Good evening,
I'm using Eclipse with the UI-Framework Codename One.
I would like to know how it would be possible to scale an image to fit the width of the screen?
I would like to create a list with one image( or even an imageslider if this is possible), which has the full width of the phone, and under that some text.
Another question is, how can I set an Image via Hastable and Vector from code ? I tried everything but I can't find a solution.
Thank you a lot,
Greetings Patric
It depends on what you are trying to do.
Normally you would just set the image as the background image of the component and select the background behavior as SCALE_TO_FIT which can be done both via the theme designer and via the Style object of the component.
You can also use the ImageViewer class if you want to have a viewable/zoomable image.
You can also just scale the image to the size you want using either the scaled() method or ImageIO.
I have created a symbol in Edge Animate, which contains a rectangle as view area and an image and text as contents of that view area. I want to set text and image src before I start the animation of the symbol. So when a certain area is clicked, I can set "Text" with
var thing = sym.getSymbol("mySymbol");
thing.$("Text").html("I can set some text here to change the content of Text.");
Question now is, how I can set the image source for the item "Image" within that symbol. I have looked into the files Edge Animate creates, and the text as shown above is in a field called "text", while the name of the image is contained with other information in a field called "fill". I don't have a clue how to set the image source. Any pointers?
Thanks in advance
M.
Here's a solid solution, which I've been working out over the past few hours.
General
The first step is to get a reference to the element, for example, if the element is named "MyTextBox", you would address it like this:
$(sym.lookupSelector("MyTextBox"));
Dynamically Changing Text
To do this, you can set the HTML property for the referenced element:
$(sym.lookupSelector("MyTextBox")).html("Hello World");
Dynamically Changing Images
Images are implemented by using the background-image CSS property of a DIV. If you had an image element named MyImageBox, the syntax would be:
$(sym.lookupSelector("MyImageBox")).css('background-image', [image]);
There's a second part, which is getting the [image] reference correct.
If it's in the default Edge images directory, use the relative URL:
images/MyNewImage.png
Use standard syntax for CSS background-image:
url(images/MyNewImage.png)
one approach might be to append an img tag and define its source.
for example:
$('<img src="mypic.png">').appendTo($('Text'));
replace "mypic.png" with the path for the image you want to use.
hope this helps.
I met a limit with quite typical operation. Simple document:
http://i.stack.imgur.com/JNI9v.png
As you can see, image has right and bottom margins. But... CKEditor image dialogue provides VSpace and HSpace parameters which influence together to Top-Bottom or Left-Right twin values and adds unnecessary top and left margins:
http://i.stack.imgur.com/vo3oC.png
Of course, users won't use pure code to define this in style="..." attribute. So, how to allow users insert images as shown on the first image? Maybe exists CKEditor plugin or patch... and i just can't find it.
Another, maybe even a simpler way, to achieve what you want would be to use a predefined set of styles for images and use the "Styles" combo to apply one of preselected classes. This way the styles used for images could be more consistent.
To see what I mean you can check the "Standard" demo - click on an Image and in the "Styles" combo select "Object styles -> Styled image (right)"