0

Radio button with image

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

Saidamin gravatar image Saidamin
1

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" />
</radiogroup>

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
1

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

cor3000 gravatar image cor3000
4466 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

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

or using an sclass on demand where rescaling is needed

<style>
.small-radio-image .z-radio-content img {
    width: 32px;
    height: 32px;
}
</style>
<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" />
</radiogroup>

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

Robert

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

Follow
1 follower

RSS

Stats

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

Seen: 37 times

Last updated: Sep 13 '16

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