3

我正在尝试找出在文章中上传和显示图片的最佳方式。现在我在 apostrophe-blog-pages show.html 模板下有以下代码

<div>
          {{ apos.area(data.piece, 'main', {
                widgets: {
                  'apostrophe-rich-text': {
                     toolbar: [ 'Styles', 'Bold', 'Italic', 'Blockquote', 'Link', 'Anchor', 'Unlink', 'Table', 'BulletedList', 'NumberedList' ],
                     styles: [
                       { name: 'Title', element: 'h3' },
                       { value: 'h5', label: 'Subtitle' },
                       { name: 'Paragraph', element: 'p' }
                     ]
                   },
                  'apostrophe-images': {
                    size: 'original'
                  },
                  'apostrophe-video': {}
                }
              }) }}
        </div>

我面临的问题是我有不同大小和纵横比的图像。撇号或 imagemagick 会自动决定图像的实际纵横比应该是什么样子，对于较大的图像它可以正常工作，但对于较小的图像（通常小于 400 像素大小），图像会显示像素化或放大。

不确定以原始高度和宽度显示图像的最佳方法是什么。

4

2 回答 2

2

如你所知，我是 P'unk Avenue 的 Apostrophe 的首席开发人员。

在您提供的代码中，撇号实际上并没有以任何方式触及您的纵横比或图像尺寸。您正在设置size为original，但您还没有设置minSize或aspectRatio，所以撇号对您的形象真的没有意见。

实际上，我们强烈反对使用 ，original除非您有非常非常好的理由让您的用户特别考虑要上传的图片的正确大小。如果您让您的用户上传他们最好的图像（嗯，大约 2000x2000 左右......）并使用撇号的大小，如one-half，full和max，并使用 CSS 进行最终调整，您将获得良好的页面加载速度而无需让网站管理员在 Photoshop 中预先调整所有内容的大小。

但同样......您的代码中没有任何内容以任何方式裁剪图像。

如果你认为这里有一个错误，即撇号在不应该出现的地方裁剪，请在 github 中准备一个测试项目，并在撇号项目上打开一个 github 问题并提供详细信息。

谢谢！

于 2016-11-23T20:30:19.263 回答
0

不是最好的解决方案，但因为问题在于 CSS 样式。我不得不覆盖 img 宽度样式并且更改解决了这个问题。

.apos-slideshow .apos-slideshow-item img {
    width: auto !important;
}
于 2016-12-01T18:30:35.757 回答