引导图像/视频上传和预览

Posted

技术标签:

【中文标题】引导图像/视频上传和预览【英文标题】:Bootstrap image/video upload and preview 【发布时间】:2020-02-25 05:14:00 【问题描述】:

您好,我们目前正在使用引导模板制作网站。数据库驱动。 javascriptphp

我们想知道是否有人知道解决我们面临的问题的好方法。

我们将成为一个广告平台。我们有一个帖子广告部分,分为 3 个步骤。

    输入数据。 上传图片。 预览广告。

媒体显示为 1 张大图以及下面的 x 张图片作为可点击的缩略图。

这很好,但我们注意到我们的解决方案似乎是调整图像大小以使其适合该区域,而不是保持其比例。

现在我们已经注意到这一点,还有其他一些事情让我们对我们的解决方案感到恼火,主要是没有视频上传和播放。

我想知道是否有人知道他们可以推荐的好的解决方案?

【问题讨论】:

【参考方案1】:

“这很好,但我们注意到我们的解决方案似乎是调整图像大小以使其适合该区域,而不是保持其比例。” 为此,您将需要一点 CSS 图像的容器应具有固定宽度,而图像的全宽应为 100%,例如

<div class="container"><img class="img-fluid" src="myimage.jpg" /></div>

这里的“img-fluid”是 (width-100) 类,它在旧的引导版本上可能是“img-responsive”

既然我们已经注意到这一点,我们的解决方案还有其他让我们烦恼的事情,主要是没有视频上传和播放

在此处查看此解决方案video embed

希望对你有帮助

【讨论】:

以上是关于引导图像/视频上传和预览的主要内容,如果未能解决你的问题,请参考以下文章

前端开发:美观功能强大基于Bootstrap的上传组件(FileInput)

如何在网站上预览用户想要上传的视频文件(PHP、FiileAPI JS)

使用 PHP yii 框架以带有图像预览和裁剪工具的注册表单上传图像?

Laravel 多次上传图像预览然后裁剪

在 xmpp 中上传预览图像

不同分辨率的视频和视频预览图(海报)