Question

我有一个网站，为最终用户显示照片库。我想根据用户的设备大小快速上传图片。

例如，如果它们位于具有高像素比的桌面上，则显示的图像将是非常大的高质量图像。但是，如果它们在移动设备上，则图像不需要是大像素，而是网站将产生尺寸明显更小的图像。

请注意，我不是试图根据屏幕尺寸调整图像大小。我希望网站生成相同的图像，但文件大小不同。即使这意味着我将10个不同大小的同一图像上传到服务器。我猜这意味着根据屏幕大小更改scr。

希望有意义，谢谢你的帮助！

Answer 1

为什么不在CSS中查看media query ...

https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

Answer 2

我理解你所要求的翻译：＆＃34;我需要内容优化＆＃34;。是的使用例如：php + gd你可以存储你的一张图片到不同大小的版本。没有逻辑发送到Android设备屏幕800 x 600 px调整大小4800x 2000像素到所以

将图像上传到文件夹 https://www.w3schools.com/php/php_file_upload.asp

2.使用修改后的Resize image in PHP版本调整该图片的尺寸

3.检测用户的屏幕尺寸 How to detect the screen resolution with JavaScript?

4.在一个if else解析器决定巫婆版本（大小）将更好地放入 load an image after clicking a button

完成！：d

Answer 3

试试这个

@media only screen and (max-width:600px)
 {
  .class
 {
   background-image:url("src for maximum 600px");
 }   


  @media only screen and (max-width:1200px)
 {
  .class
 {
   background-image:url("src for maximum 1200px");
 }

如何根据用户的屏幕大小更改图像的src

3 个答案: