与图像JavaFX的CSS按钮 - 如何定义图像的大小？ [英] JavaFX CSS Button with Image - How to define the size of the image?

问题描述

我想在使用JavaFX CSS按钮插入图像。 - FX-图形虽然，我可以很容易使用的做的。标签，我无法找到一个方法来调整大小我想要的任何大小的图像

我可以通过以下FXML code，其中我给30至图像的我的preferred宽度做到这一点，但我想用纯CSS来做到这一点。有没有办法做到这一点？

FXML

 ＆LT;按钮文本=preSS我＆GT;
   ＆LT;＆图形GT;
      ＆所述; ImageView的fitWidth =30＆GT;
        ＆lt;图像＆GT;
          ＆lt;图像URL =myImage.png/＆GT;
        ＆LT; /图片＆GT;
      ＆LT; / ImageView的＆GT;
   ＆LT; /图形＆GT;
＆LT; /按钮＆GT;
 

CSS

  #buttonWithImage {
    -fx图形：URL（myImage.png）;
}
 

解决方案

我有同样的问题，并找到了一个解决办法：而不是使用-fx形象，我使用-fx背景图像

不是说我使用一个额外的lib使用SVG文件在下面的例子。

CSS

  #buttonWithImage {
    -fx背景图像：网址（'myimage.svg'）;
    -fx背景大小：30像素;
    -fx-背景重复：不重复;
    -fx-背景位置：90％;
}
 

I am trying to insert an image in a button using JavaFX CSS. Although, I can do it easily using the "-fx-graphic" tag, I cannot find a way to resize the image in whatever size I want.

I can do this through the following FXML code, where I give 30 to my preferred width of image, but I would like to do this with pure CSS. Is there any way to do that?

FXML

<Button text="Press Me">
   <graphic>
      <ImageView fitWidth="30">
        <image>
          <Image url="myImage.png"/>
        </image>
      </ImageView>
   </graphic>
</Button>

CSS

#buttonWithImage {          
    -fx-graphic: url("myImage.png");
}

解决方案

I had the same problem and found a workaround: instead of using -fx-image, I use -fx-background-image.

Not that i use an additional lib to use svg file in the following example.

CSS

#buttonWithImage { 
    -fx-background-image: url('myimage.svg');
    -fx-background-size: 30px;
    -fx-background-repeat: no-repeat;
    -fx-background-position: 90%;
}

这篇关于与图像JavaFX的CSS按钮 - 如何定义图像的大小？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！