ngx-image-zoom icon indicating copy to clipboard operation
ngx-image-zoom copied to clipboard

Width and Height of the image

Open edu1525 opened this issue 4 years ago • 9 comments

How to set the initial width and height of the image with this library? I'm trying to set lib-ngx-image-zoom style but it is not working.

edu1525 avatar Jun 07 '20 06:06 edu1525

It's currently built so that the initial size, the thumbnail size, will be the size of the thumbnail. It was the requirement I had at the time I started. There's been several requests to alter this though so when I next have time to work on this library that is likely to be a first feature I'll try to tackle.

wittlock avatar Jun 07 '20 10:06 wittlock

Kindly bring this feature as soon as possible as handling image becomes difficult when having an image with large resolutions. waiting for this update in all version.

ronaksinghbagga avatar Jul 23 '20 13:07 ronaksinghbagga

@edu1525 & @ronaksinghbagga to change the width and height of the picture, add your styles to the file styles.scss in the root folder example to modify the thumbnail ngx-image-zoom .ngxImageZoomThumbnail { max-height: 200px; }

mowamed avatar Nov 01 '20 21:11 mowamed

@edu1525 & @ronaksinghbagga to change the width and height of the picture, add your styles to the file styles.scss in the root folder example to modify the thumbnail ngx-image-zoom .ngxImageZoomThumbnail { max-height: 200px; }

I have tried to set css like this one but it will not working perfectly in my case , i have full resolution of incoming image (5744 * 3741 ) and i would like to set & display in (1020 * 754).

savanrajkotiya avatar Jan 02 '21 18:01 savanrajkotiya

ngx-image-zoom .ngxImageZoomThumbnail { max-height: 200px; }

@edu1525 didn't help.

TLKG avatar Apr 19 '21 22:04 TLKG

ngx-image-zoom .ngxImageZoomThumbnail { max-height: 200px; }

@edu1525 didn't help.

You are trying to apply css properties from a parent component to a child component while their css logic is separated. You can use ::ng-deep to make the child components inherit the css property

I think this will work for you :

::ng-deep ngx-image-zoom .ngxImageZoomThumbnail { max-height: 200px; }

imadharilla avatar Apr 27 '21 00:04 imadharilla

::ng-deep ngx-image-zoom .ngxImageZoomThumbnail { max-height: 200px; }

@imadharilla Although ng-deep is being deprecated, it works! Thanks.

TLKG avatar Apr 28 '21 16:04 TLKG

Friendly as if there is any news on this issue?

vsc-cnst avatar Mar 07 '23 12:03 vsc-cnst

the initial width and height would be awesome to be set on the attributes of the img tag, as they help reduce CLS https://web.dev/articles/cls

JomaKar avatar Apr 28 '24 18:04 JomaKar