你说的这个叫媒体查询,是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中如何调整插入背景图片的大小、等相关内容解答,如果想了解更多相关内容,可以关注我们,你们的支持是我们更新的动力!
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)