How to make the image fullscreen without making cropping the big images

Question

I am using ember-fullscreen addon in ember app.I am showing the image in fullscreen ( just like facebook does.) The problem I am facing is if the images is big in dimensions.Then the I am not able to see the full image.Only a partial part of image is being shown.But in Facebook Whatever may the dimension of image.They are able to show the full image in fullscreen mode.How should I do I do that in ember app.

component.js

import Ember from 'ember';

export default Ember.Component.extend({
  tagName: 'img',
  attributeBindings: ['src', 'width', 'height'],

});

template.hbs

{{#if fullscreen.isEnabled}}
    {{full-screen src=photo.photo_url}}
{{/if}}

What should I do so that it should be able to display the whole images inside the screen-size when in fullscreen mode.Thanks in adavnce.

Answer 1

If you have a fixed width/height for the photo, try making it dynamically sized by changing the CSS for the photo to something like:

.my-photo {
    ...
    height:100%;
    width:100%;
    ...
}