Radio button with image

asked 2016-09-12 19:43:20 +0800

Saidamin gravatar image Saidamin

Hello, I found how to use image in radio button.

<radiogroup id="genderRadio">
<radio label="Male" value="male" image="/images/male.png" checked="true" />
<radio label="Female" value="female" image="/images/female.png" />

My question is HOW TO RESIZE image? For example, my images are 256 by 256, is it possible to resize it to 32X32 in code instead of re-saving resized png file?

delete flag offensive retag edit

1 Answer

Sort by ยป oldest newest most voted

answered 2016-09-13 01:30:14 +0800

cor3000 gravatar image cor3000
5399 2 7
ZK Team

Hello Saidamin,

you can resize the images using css this can be done either globally for all images in <radio> elements

.z-radio .z-radio-content img {
    width: 32px; /*could also use max-width/height to allow smaller images*/
    height: 32px;

or using an sclass on demand where rescaling is needed

.small-radio-image .z-radio-content img {
    width: 32px;
    height: 32px;
<radiogroup id="genderRadio">
    <radio label="Male" value="male" sclass="small-radio-image" 
    image="/images/male.png" checked="true" />
    <radio label="Female" value="female" sclass="small-radio-image" 
    image="/images/female.png" />

Still the full 256x256 image will be downloaded and downscaled at client side.


link publish delete flag offensive edit
Your answer
Please start posting your answer anonymously - your answer will be saved within the current session and published after you log in or create a new account. Please try to give a substantial answer, for discussions, please use comments and please do remember to vote (after you log in)!

[hide preview]

Question tools

1 follower



Asked: 2016-09-12 19:43:20 +0800

Seen: 38 times

Last updated: Sep 13 '16

Support Options
  • Email Support
  • Training
  • Consulting
  • Outsourcing
Learn More