如何在不裁剪大图像的情况下使图像全屏

Question

我在ember应用程序中使用ember-fullscreen插件。我正在全屏显示图像（就像facebook一样。）我面临的问题是图像尺寸大。然后我无法看到完整的图像。只显示图像的部分部分。但是在Facebook中无论图像的维度是什么。它们能够以全屏模式显示完整的图像。我该如何在ember应用程序中执行此操作。

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}}

我应该怎么做才能在全屏模式下在屏幕尺寸内显示整个图像。谢谢。

Answer 1

如果您有照片的固定宽度/高度，请尝试通过将照片的CSS更改为以下内容来动态调整大小：

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