How to create an image of all devices (smartphone, laptop, desktop, tablet) showing same picture.This kind of image generally used for representing responsive nature.
Is there any particular tool to create this type of image ?
Example Image from Google :
Welcome to the forums.
Tool?
I would like to recommend that you take a basic HTML/CSS course.
This code is a “working page”. Copy it to a file with an .html suffix and open that file in your browser.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="stylesheet" href="css/stylesheet.css">
<title>responsive image</title>
<!--
https://www.sitepoint.com/community/t/image-creation-on-different-dimensions/312118
wilsonrobin21
2018.11.16 05:03
-->
<style>
img {
max-width:100%;
height:auto;
}
</style>
</head>
<body>
<img src="https://www.techwyse.com/blog/wp-content/uploads/2013/11/responsive-design.jpg" alt="image comparing relative monitor sizes" width="790" height="474">
</body>
</html>
I’m not clear on the actual question?
Are you talking about making an image itself which would not be an html css issue but a graphic design question?
Or are you talking about how to make images responsive?
It seems to me that you are asking for help in making an image that depicts responsiveness rather than making images responsive.
I would use Imagemagick.
I should expand a bit; you can input the image into the code and create multiple copies of the image in different sizes at the same time.
I use it on my website with php and on my Windows PC as a batch file.
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.