Width and Height of the image
Opened this issue · 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.
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.
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.
@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; }
@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).
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; }
::ng-deep ngx-image-zoom .ngxImageZoomThumbnail { max-height: 200px; }
@imadharilla Although ng-deep is being deprecated, it works! Thanks.
Friendly as if there is any news on this issue?
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