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

Question

我在 ember 应用程序中使用 ember-fullscreen 插件。我正在全屏显示图像（就像 facebook 一样。）我面临的问题是图像的尺寸是否很大。然后我无法看到完整的图像.只显示图像的一部分。但是在 Facebook 中，无论图像的尺寸如何。他们都能够以全屏模式显示完整的图像。我应该如何在 ember 应用程序中做到这一点。

组件.js

import Ember from 'ember';

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

});

模板.hbs

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

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

Answer 1

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

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