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

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

你说的这个叫媒体查询,是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中如何调整插入背景图片的大小、等相关内容解答,如果想了解更多相关内容,可以关注我们,你们的支持是我们更新的动力!

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/web/9493264.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-04-28
下一篇 2023-04-28

发表评论

登录后才能评论

评论列表(0条)

保存