Trying to make sure the image on my phone adjusts its size based on orientation, I attempted using Ionic4. When in landscape mode, I want it to adapt according to height instead of width. Essentially, I need it to use the minimum size and also require the opposite functionality for another area (maximum).
My initial approach was using the min() and max() functions; however, they seemed to not work. Upon further investigation, it appears that these functions have been deprecated. I'm open to exploring alternative methods if available.
.heart-style {
position: absolute;
right: 0;
top: 0;
width: min(10vw, 10vh);
height: min(10vw, 10vh);
}
.welcome-card ion-img {
height: max(30vh, 30vw);
object-fit: cover;
}
This is the error message when attempting to use min() or max() functions:
Compilation failed.
./src/app/home/home.page.scss Module build failed (from ./node_modules/sass-loader/lib/loader.js): Incompatible units: 'vh' and 'vw'.
I also experimented with different units, but encountered the same issue.