怎样在CSS里根据显示器分辨率调整大小以px为单位的图片宽度

你说的这个叫媒体查询，是CSS3里面的概念。

通过媒体查询，可以根据不同的屏幕分辨率使用不同的显示策略。

媒体查询的使用方式如下：

@media (min-width:800px) and (max-width:1200px) {  }

即：屏幕分辨率大于800，小于1200的使用这个策略。

这样就可以根据不同的屏幕分辨率在css样式里设置的宽度了。

可以通过cover和contain来对进行伸缩。

语法：

background-size:auto;/ 默认值，不改变背景的高度和宽度 /

background-size:100px 50px;/ 第一个值为宽，第二个值为高，当设置一个值时，将其作为宽度来等比缩放 /

background-size:10%;/ 0％~100％之间的任何值，将背景宽高按百分比显示，当设置一个值的时候同也将其作为宽度来等比缩放 /

background-size:cover;/ 将背景等比缩放填满整个容器 /

background-size:contain;/ 将背景等比缩放至某一边紧贴容器边缘 /

扩展资料：

CSS背景自适应、全屏、填充、拉伸

方法一：js控制

<div id="formbackground" style="position:absolute; width:100%; height:100%; z-index:-1">  

<img src="pictures/backgroundjpg" height="100%" width="100%"/>

</div>

<div id="formbackground" style="position:absolute; z-index:-1;"><img src="10jpg" height="100%" width="100%"/></div>

<script type="text/javascript">

$(function(){

$('#formbackground')height($(window)height());

$('#formbackground')width($(window)width());

});

</script>

方法二：全浏览器兼容

bg{

background:url(>

filter:"progid:DXImageTransformMicrosoftAlphaImageLoader(sizingMethod='scale')";

-moz-background-size:100% 100%;

background-size:100% 100%;

}

以上就是关于怎样在CSS里根据显示器分辨率调整大小以px为单位的图片宽度全部的内容，包括:怎样在CSS里根据显示器分辨率调整大小以px为单位的图片宽度、css中如何调整插入背景图片的大小、等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！