How to set the borderline according to the image height and width in react native?











up vote
2
down vote

favorite












How the image border will be set in UI according to the image height and width. Here I have removed the background color of the selected image to transparent and trying to set the border dotted lines to its width and height.



enter image description here



enter image description here
I need to show as the image sandal.










share|improve this question
























  • crop the image, cutting off it's transparent area
    – Carol McKay
    Nov 22 at 7:40










  • How to crop its area
    – Jes
    Nov 22 at 7:40










  • I have already set a height and width for that image. Each images are in different sizes. So I have added the image as transparent to see its behind image. But some image filled in the container with no transparent area.
    – Jes
    Nov 22 at 7:44










  • with an image editor, what did you use to make the transparency?
    – Carol McKay
    Nov 22 at 7:44










  • I simply set the background color as "transparent" in Animated View style. The image is render by using the FastImage component
    – Jes
    Nov 22 at 7:45

















up vote
2
down vote

favorite












How the image border will be set in UI according to the image height and width. Here I have removed the background color of the selected image to transparent and trying to set the border dotted lines to its width and height.



enter image description here



enter image description here
I need to show as the image sandal.










share|improve this question
























  • crop the image, cutting off it's transparent area
    – Carol McKay
    Nov 22 at 7:40










  • How to crop its area
    – Jes
    Nov 22 at 7:40










  • I have already set a height and width for that image. Each images are in different sizes. So I have added the image as transparent to see its behind image. But some image filled in the container with no transparent area.
    – Jes
    Nov 22 at 7:44










  • with an image editor, what did you use to make the transparency?
    – Carol McKay
    Nov 22 at 7:44










  • I simply set the background color as "transparent" in Animated View style. The image is render by using the FastImage component
    – Jes
    Nov 22 at 7:45















up vote
2
down vote

favorite









up vote
2
down vote

favorite











How the image border will be set in UI according to the image height and width. Here I have removed the background color of the selected image to transparent and trying to set the border dotted lines to its width and height.



enter image description here



enter image description here
I need to show as the image sandal.










share|improve this question















How the image border will be set in UI according to the image height and width. Here I have removed the background color of the selected image to transparent and trying to set the border dotted lines to its width and height.



enter image description here



enter image description here
I need to show as the image sandal.







css css3 react-native






share|improve this question















share|improve this question













share|improve this question




share|improve this question








edited Nov 23 at 10:09









Antu

546319




546319










asked Nov 22 at 7:34









Jes

21618




21618












  • crop the image, cutting off it's transparent area
    – Carol McKay
    Nov 22 at 7:40










  • How to crop its area
    – Jes
    Nov 22 at 7:40










  • I have already set a height and width for that image. Each images are in different sizes. So I have added the image as transparent to see its behind image. But some image filled in the container with no transparent area.
    – Jes
    Nov 22 at 7:44










  • with an image editor, what did you use to make the transparency?
    – Carol McKay
    Nov 22 at 7:44










  • I simply set the background color as "transparent" in Animated View style. The image is render by using the FastImage component
    – Jes
    Nov 22 at 7:45




















  • crop the image, cutting off it's transparent area
    – Carol McKay
    Nov 22 at 7:40










  • How to crop its area
    – Jes
    Nov 22 at 7:40










  • I have already set a height and width for that image. Each images are in different sizes. So I have added the image as transparent to see its behind image. But some image filled in the container with no transparent area.
    – Jes
    Nov 22 at 7:44










  • with an image editor, what did you use to make the transparency?
    – Carol McKay
    Nov 22 at 7:44










  • I simply set the background color as "transparent" in Animated View style. The image is render by using the FastImage component
    – Jes
    Nov 22 at 7:45


















crop the image, cutting off it's transparent area
– Carol McKay
Nov 22 at 7:40




crop the image, cutting off it's transparent area
– Carol McKay
Nov 22 at 7:40












How to crop its area
– Jes
Nov 22 at 7:40




How to crop its area
– Jes
Nov 22 at 7:40












I have already set a height and width for that image. Each images are in different sizes. So I have added the image as transparent to see its behind image. But some image filled in the container with no transparent area.
– Jes
Nov 22 at 7:44




I have already set a height and width for that image. Each images are in different sizes. So I have added the image as transparent to see its behind image. But some image filled in the container with no transparent area.
– Jes
Nov 22 at 7:44












with an image editor, what did you use to make the transparency?
– Carol McKay
Nov 22 at 7:44




with an image editor, what did you use to make the transparency?
– Carol McKay
Nov 22 at 7:44












I simply set the background color as "transparent" in Animated View style. The image is render by using the FastImage component
– Jes
Nov 22 at 7:45






I simply set the background color as "transparent" in Animated View style. The image is render by using the FastImage component
– Jes
Nov 22 at 7:45














1 Answer
1






active

oldest

votes

















up vote
0
down vote













I had the same issue. If your images don't have the same dimensions, you can't set the same borderline, e.g they can't fill all space.






share|improve this answer





















    Your Answer






    StackExchange.ifUsing("editor", function () {
    StackExchange.using("externalEditor", function () {
    StackExchange.using("snippets", function () {
    StackExchange.snippets.init();
    });
    });
    }, "code-snippets");

    StackExchange.ready(function() {
    var channelOptions = {
    tags: "".split(" "),
    id: "1"
    };
    initTagRenderer("".split(" "), "".split(" "), channelOptions);

    StackExchange.using("externalEditor", function() {
    // Have to fire editor after snippets, if snippets enabled
    if (StackExchange.settings.snippets.snippetsEnabled) {
    StackExchange.using("snippets", function() {
    createEditor();
    });
    }
    else {
    createEditor();
    }
    });

    function createEditor() {
    StackExchange.prepareEditor({
    heartbeatType: 'answer',
    convertImagesToLinks: true,
    noModals: true,
    showLowRepImageUploadWarning: true,
    reputationToPostImages: 10,
    bindNavPrevention: true,
    postfix: "",
    imageUploader: {
    brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
    contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
    allowUrls: true
    },
    onDemand: true,
    discardSelector: ".discard-answer"
    ,immediatelyShowMarkdownHelp:true
    });


    }
    });














    draft saved

    draft discarded


















    StackExchange.ready(
    function () {
    StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53425935%2fhow-to-set-the-borderline-according-to-the-image-height-and-width-in-react-nativ%23new-answer', 'question_page');
    }
    );

    Post as a guest















    Required, but never shown

























    1 Answer
    1






    active

    oldest

    votes








    1 Answer
    1






    active

    oldest

    votes









    active

    oldest

    votes






    active

    oldest

    votes








    up vote
    0
    down vote













    I had the same issue. If your images don't have the same dimensions, you can't set the same borderline, e.g they can't fill all space.






    share|improve this answer

























      up vote
      0
      down vote













      I had the same issue. If your images don't have the same dimensions, you can't set the same borderline, e.g they can't fill all space.






      share|improve this answer























        up vote
        0
        down vote










        up vote
        0
        down vote









        I had the same issue. If your images don't have the same dimensions, you can't set the same borderline, e.g they can't fill all space.






        share|improve this answer












        I had the same issue. If your images don't have the same dimensions, you can't set the same borderline, e.g they can't fill all space.







        share|improve this answer












        share|improve this answer



        share|improve this answer










        answered Nov 22 at 8:25









        wellDev

        113




        113






























            draft saved

            draft discarded




















































            Thanks for contributing an answer to Stack Overflow!


            • Please be sure to answer the question. Provide details and share your research!

            But avoid



            • Asking for help, clarification, or responding to other answers.

            • Making statements based on opinion; back them up with references or personal experience.


            To learn more, see our tips on writing great answers.





            Some of your past answers have not been well-received, and you're in danger of being blocked from answering.


            Please pay close attention to the following guidance:


            • Please be sure to answer the question. Provide details and share your research!

            But avoid



            • Asking for help, clarification, or responding to other answers.

            • Making statements based on opinion; back them up with references or personal experience.


            To learn more, see our tips on writing great answers.




            draft saved


            draft discarded














            StackExchange.ready(
            function () {
            StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53425935%2fhow-to-set-the-borderline-according-to-the-image-height-and-width-in-react-nativ%23new-answer', 'question_page');
            }
            );

            Post as a guest















            Required, but never shown





















































            Required, but never shown














            Required, but never shown












            Required, but never shown







            Required, but never shown

































            Required, but never shown














            Required, but never shown












            Required, but never shown







            Required, but never shown







            Popular posts from this blog

            Lallio

            Futebolista

            Jornalista