如何使网站图像和幻灯片显示为设备屏幕？

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>。将顶部和底部部分放在<div> s 1和3中，然后将第二部分分成三个较小的<div>。在左侧和右侧子{ - 1}}中渲染左右部分，最后在中间部分渲染幻灯片。

Answer 2

我不知道我是否完全理解你的问题，我可能会离开，但我会尝试从我认为你的问题回答它。 Responsive Design正是您要找的。在所有设备上完美显示页面。

我还使用了一种工具来查看不同分辨率的Resize my browser我的网页，让我看到我的网页在不同大小的浏览器，iphone等上的外观......如果您的代码是正确的是一个非常有用的网站。

希望我有点回答这个问题。