feat: ion-slides auto sizing on container's height

[AlGantori]

Ionic version: (check one with "x") [X ] 2.x

I'm submitting a ... (check one with "x") [X ] bug report

Current behavior:

Upon launch image is not resized to fit the available view

Here it is on an Android device galaxy S5

Expected behavior: The image height should be seen, the width reduced to fit in the available space without loosing aspect ratio.

Steps to reproduce: ionic start --v2 myApp tabs replace code of home.html and home.ts as below

home.html

<ion-header>
    <ion-navbar>
        <ion-title>Home</ion-title>
    </ion-navbar>
</ion-header>

<ion-content padding>
    <div id="wrapper">
        <ion-slides #Slides>
            <ion-slide *ngFor="let s of SlidesData ">

                <img id="AMSImage" src={{s.PIC}} >
                        <!--style='height: 100%; width: 100%; object-fit: contain'-->

            </ion-slide>
        </ion-slides>
    </div>
</ion-content>

home.ts

import { Component } from '@angular/core';

import { NavController } from 'ionic-angular';
import { Slides } from 'ionic-angular'; // 20160807
import { ViewChild } from '@angular/core'; // 20160807

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  constructor(public navCtrl: NavController) {
  }

  @ViewChild('Slides') Slides: Slides;
  ngAfterViewInit() {
    console.log("Slider------------>>Input Props Set");
    this.Slides.autoHeight = true;
    // this.Slides.observer = true ;
  }

  SlidesData: any = [
    { PIC: "http://arabicrescue.com/ARABIC/NUMBERS.BMP/BY DIGITS/01 10/01 01.png" }
    , { PIC: "http://arabicrescue.com/ARABIC/NUMBERS.BMP/BY DIGITS/01 10/01 02.png" }
    , { PIC: "http://arabicrescue.com/ARABIC/NUMBERS.BMP/BY DIGITS/01 10/01 03.png" }
    , { PIC: "http://arabicrescue.com/ARABIC/NUMBERS.BMP/BY DIGITS/01 10/01 04.png" }
  ];

  SlideChanged() {
  }
}

I have also found some CSS to auto-resize the image in the available container, however it seems, in my case, to work only for width resizing not for height. Also, unlike on a simple image, the resizing behavior is somehow altered by ionic2/Slider.js, here it is if can help someone you can tweak it to work as expected. found here http://stackoverflow.com/questions/3029422/how-do-i-auto-resize-an-image-to-fit-a-div-container

$ ionic info

Your system information:

 ordova CLI: 6.4.0
Ionic Framework Version: 2.0.0
Ionic CLI Version: 2.2.1
Ionic App Lib Version: 2.2.0
Ionic App Scripts Version: 1.0.0
ios-deploy version: Not installed
ios-sim version: Not installed
OS: Windows 7
Node Version: v7.2.0
Xcode version: Not installed

For the purpose of providing more info, I have removed temporarily the nav bar and tabs as they seem to interfere with the desired image sizing results. I am not sure if this can be achieved with CSS alone and where the CSS needs to be applied to the image or the slider, or ion-content or what?

some home.html will now look just like this (no ion-header or ion-content)

   <div id="wrapper">
        <ion-slides #Slides>
            <ion-slide *ngFor="let s of SlidesData ">

                <img id="AMSImage" src={{s.PIC}} style="height: 100vh !important; " >

                <!--style='height: 100%; width: 100%; object-fit: contain'-->
                <!--style="max-height: 100vh !important; max-width: 100vw !important;"-->
            </ion-slide>
        </ion-slides>
    </div>

I would like to see the following behavior

when the viewport is landscape the image height need to fit and auto-resizes if landscape viewport changes height achieved with this alone

     <img id="AMSImage" src={{s.PIC}} style="height: 100vh !important; " >

when height is increased

In portrait real-estate, I want the image width to fit and auto-resizes if portrait viewport changes width achieved with this alone

<img id="AMSImage" src={{s.PIC}} style="width: 100vw !important; ">

when width is increased we get

The image always retains it aspect ratio.

These picture happen to be 400 x 300, but I expected it to handle sizes like 1920 x 1080, in the same way. Just like it is reduced proportionally when the available space is small, the image is expected to enlarge by logical symmetry when the available space is larger. If over enlarging is feared in super density screens we could supply a max-width max-height behavior.

Note / Weird: unlike in the landscape mode, in portrait the image is docked to the top by the ion-slides and not centered vertically. I would have expected this behavior to be the default.

.

[jgw96]

Hello, thanks for opening an issue with us! Has this ever worked in ion-slides? This seems like custom functionality instead of something that should be built into ion-slides.

[AlGantori]

Hi, I am new to JS, TS, nodes.js, Angular2, Ionic2 programming so I have been mostly struggling with the beta from June 2016 and trying to get the app synched with RC0...6 and now 2.0.0 So I did not worry about the overflowing of ion-slides or ion-content, I assumed there is some input parameter that would take care of like autoHeight . I tend to have extra tester buttons in the ion-content during this development stage. So now that I am trying to polish the looks and removed the develop debug buttons. I have not even not tackled a background bitmap, I see the slider is not getting resized to fit the available space.

When I implemented this on Android via C# / Xamarin framework, there was support via the ViewPager and RelativeLayout configurations to get the desired effect (see 0dp and match_parent below). Here is a declaration of ViewPager

<!--Content Pager-->
    <android.support.v4.view.ViewPager
        android:id="@+id/ViewPager"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="6" />

            <ImageView
                android:id="@+id/PC_Loop"
                android:src="@drawable/PC_Loop"
                android:scaleType="fitCenter"
                android:adjustViewBounds="true"
                android:layout_width="match_parent"
                android:layout_height="0dp"
                android:layout_weight="1"
....

I feel there should be some level of support in a framework like ionic2 to allow displaying images in their entirety via some sort of pager component and have that behavior propagated to the various platforms (ios, android, ...). Currently, it's not clear which which component or combination of components would do the job, I looked at ionic Cards, Grid docs but ion-slides seemed the 1st obvious choice, again I am new and the expected behaviors/functionality are not clearly described in the current docs (I understand we just made it to 2.0.0).

Ionic2 has built on slider.js and it seems that a "slider/pager" in general would have to adjust the width of the pictures whether it displayed one or 3 at a time. It's only logical that it should force the height of the content to be visible, I don't think you would expect users on mobile devices to get a vertical scrollbar on a horizontal slider, correct? (it's OK in a browser perhaps).

Thinking differently shouldn't any component, including ion-slides, have and option to inherit the available size of its parent? For example, in the tabs template I would think it would be ion-content. Perhaps, this is biased from my experience with Android native components nesting approach.

I am OK if the image is centered or docked left and/or top by default but such a default layout should be consistent whether we are in portrait or landscape mode. I can agree with the later layout ie. docked versus centered could be configured thru some props or CSS (custom layout tweaks).

I am open to any ideas toward a natural solution.

The layouts on Android with ViewPager and RelativeLayouts...

[jgw96]

Hello! Since this seems to be more of a feature request, and it does not look like ion-slides has ever supported this, i'm going to move this issue over to our internal list of feature requests for evaluation. We are continually prioritizing all requests that we receive with outstanding issues. We are extremely grateful for your feedback, but it may not always be our next priority. I'll copy the issue back to this repository when we have begun implementation. Thanks!

[jgw96]

This issue was moved to driftyco/ionic-feature-requests#113

[viveksinha121]

@jgw96 Link is broken.

[cocowalla]

@jgw96 The link is broken - this seems to have happened for a lot of issues that were closed without a fix?

[vovikdrg]

@cocowalla seems to be that issue was moved to private pool.

[fdambrosio]

I have the same problem with ionic 3.8

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.