html - How do I make website images and slideshows look like they are a device screen?

Question

There are lots of website themes that have a slideshow or image frame that is styled to look like it's a device such as a mobile screen or tablet screen or computer monitor. Please see below:

I have spent the last 4 hours looking for some code or an open source plugin that would enable me to show images this way. All I have found in 4 hours is yootheme and hostmoog that both charge for the plugin.

How does everyone else get these device style frames around images please? Do I need graphics software?

This question should help others too. I've spent ages searching under every conceivable combination.

Thanks in advance.

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 中，并将 2nd 分成三个较小<div>的 s。在左右子中渲染左右部分<div>，最后在中间部分渲染幻灯片。

Answer 2

我不知道我是否完全理解你的问题，我可能会走得更远，但我会试着从我认为你的问题中回答它。响应式设计是您正在寻找的。在所有设备上完美显示页面。

还有一个工具，我可以用它来查看不同分辨率的网页.

希望我稍微回答了这个问题。