search

samjonesigd / vue-image-zoomer

Image zoom component for Vue.js
https://samueljon.es/vue-image-zoomer
MIT License
103 stars 10 forks source link

Set image to contain #12

Closed maghffu closed 2 years ago

maghffu commented 2 years ago

How to set image fit to contain?

samjonesigd commented 2 years ago

@maghffu use the img-class prop and make a class to be 100% width or max-width 100%

maghffu commented 2 years ago

I want fit height, i set max-height to 100% but doesn't work

samjonesigd commented 2 years ago

@maghffu is your image smaller than the height of the container?

maghffu commented 2 years ago

no, my image is larger than the height of container

maghffu commented 2 years ago

it work if i use px, but doesn't work when i use calc(100% - 130px)

samjonesigd commented 2 years ago

@maghffu does your container have a height without an image in it? I'm pretty sure this is a css problem.

maghffu commented 2 years ago

my image source from base_64 format, it causing problem?

samjonesigd commented 2 years ago

@maghffu its a little bit hacky but can be done with css

https://codesandbox.io/s/cool-flower-jy9u3?file=/src/App.vue

when you set a max height of an image with a percentage the container needs to have a set height, and there's containers in the component.

I recommend working with widths instead of heights for images.