搜技巧 | 只提供最简单有效的方法与技巧

分享简单实用的方法与技巧
当前位置:搜技巧 > 网站开发 >


PC端图片自适应各种屏幕分辨率技巧

  我的图片尺寸宽度是1920px,我想要在分辨率宽度为1600px和1366px的电脑上自适应显示图片,要怎么弄呢?

网页自适应屏幕代码

  1.在网页 <head> 和 </head> 之间加入以下网页自适应屏幕代码:

<style>
 .abc{
  width:1920px;
  position:absolute;
  left:50%;
  margin-left:-960px;
  overflow:hidden;
  }
 @media screen and (max-width:1600px) {
  .abc{zoom:0.825;}   /*根据不同的屏幕分辨率设置不同的缩放比例*/
 }
 @media screen and (max-width:1366px) {
  .abc{zoom:0.75;}   /*根据不同的屏幕分辨率设置不同的缩放比例*/
 }
</style>

        2.保存修改的页面,然后上传到服务器覆盖原页面即可

分享:
如果文章帮助到你了,请点击打打赏小搜下小搜,感谢!