The image size is 500x500. It is necessary that this size be changed in accordance with the size of the monitor. For example:

1280, 500x500
768, 300x300 - tablet resolution
479, 150x150 - smartphone resolution

You need to implement this without using javascript. Is it possible to implement this stupidly in html or php itself?

    1 answer 1

    This can be done using CSS. And more precisely, the media queries .

    PS Here's a simple example . Change the width of the output frame. And by the way, I remembered that part of your task can be done in PHP - Mobile Detect . But there you can only focus on the device itself, from which the user came to the site, and not the size of the visible area of ​​the browser.

    • Is it possible to connect the media queries as a separate table? - Titan93
    • If you are talking about the "table", how about Cascading Style Sheets - cascading style sheets , then yes. You can even connect your css-file for each device, for example: <link rel = "stylesheet" href = "style1.css" media = "only screen and (min-width: 650px) and (max-width: 980px)"> <link rel = "stylesheet" href = "style2.css" media = "only screen and (max-width: 649px)"> - Deonis
    • <link rel = "stylesheet" media = "only screen and (max-width: 2000px)" href = "css / Desktop.css" /> <link rel = "stylesheet" media = "only screen and (max-width: 768px) "href =" css / Tablet.css "/> <link rel =" stylesheet "media =" only screen and (min-width: 320px) and (max-width: 580px) "href =" css / Mabile. css "/> when I delete the content inside the table" Mabile.css "for some reason automatically apply the styles" Tablet.css "is it possible to avoid this somehow ?? - Titan93
    • @ Titan93, try adding a min-width condition for Tablet.css. In general, each of the media queries will apply styles that overlap styles in other media queries or add new ones if they have not been previously specified. - Deonis
    • earned, many thanks) - Titan93