如何使网站图像和幻灯片看起来像是设备屏幕？

Question

有许多网站主题都有幻灯片或图像框架，其样式看起来像是移动屏幕、平板电脑屏幕或计算机显示器等设备。请看下面：

在过去的 4 个小时里，我一直在寻找可以让我以这种方式显示图像的代码或开源插件。我在 4 小时内找到的只是 yootheme 和 hostmoog，它们都为插件收费。

请问其他人如何在图像周围获得这些设备样式框架？我需要图形软件吗？

这个问题也应该对其他人有所帮助。我花了很长时间搜索所有可以想到的组合。

提前致谢。

Answer 1

首先，创建您的设备“背景”。然后，将图像分成四块：

The part of the background that appears above the top of the screen image
The part that appears below the bottom of the screen image
The part that appears to the left of the image between the top and bottom
The part that appears to the right of the image between the top and bottom.

然后，创建三个<div>s。将顶部和底部的部分放在<div>s 1 和 3 中，并将第二部分分成三个较小的 <div>s。在左右子<div>中渲染左右部分，最后在中间部分渲染你的幻灯片。

Answer 2

我不知道我是否完全理解你的问题，而且我可能会走得更远，但我会尝试根据我认为你的问题来回答它。 Responsive Design 是您正在寻找的。在所有设备上完美显示页面。

我还可以使用一个工具来查看不同分辨率的网页，Resize my browser，它可以让我查看我的页面在不同尺寸的浏览器、iphone 等设备上的显示效果...如果您的代码正确，这是一个非常有用的网站。

希望我能稍微回答一下这个问题。