css自适应图片样式，css实现自适应布局

CSS中让DIV背景图片自适应

1、如果通过css设置背景图，那么图片尺寸要足够大，目前大宽屏1920左右，所以宽度最好设置为1920，然后居中；如果通过div嵌入图片，那么将此div设置成绝对定位，z-index：-1。

2、一是通过将该图片设定为某个div的背景图片，然后该div的长宽不使用绝对的px，使用相对的em或者rem。二是将图片设定display：block，设定图片的长宽为rem或者em。

3、div的高度随背景图片的高度变化：原理是通过padding-top或者padding-bottom实现，值是背景图片的宽高比。

4、背景设置为图片background-repeat： repeat； 背景图片是否重复background-position： 100% 100%； 背景图片定位你这么写当然不能达到你要的效果 如果你想要的是从右下角平铺背景的话，你这么写是没问题的。

5、输入position：fixed； top： 0； left： 0；使整个div固定在屏幕的最上方和最左方。

6、对背景图片设置属性：background-size：cover；可以实现背景图片适应div的大小。background-size有3个属性：auto：当使用该属性的时候，背景图片将保持100% 的大小显示，不进行任何缩放。超过div的多余部分将被隐藏。

相关问答

Q1: DIV+CSS,如何让图片自适应大小?

1、新建一个html页面，并在页面中写上一个div。并为div添加背景图片，为背景图片添加一些基本的样式。按下键盘上的F12，查看其在浏览器中的效果。利用css中的伪元素：after或者：before。

2、首先，打开html编辑器，新建html文件，例如：index.html。在index.html中的style标签中，输入css代码：body {background： url(image12jpg) no-repeat； background-size： cover；}。

3、当遇到这样的DIV CSS布局时候，其实非常简单，我们只需要对图片宽度进行控制，而图片高度不用设置即图片高度会自动适应缩放比例（不设置高度即高度值默认为auto自适应）。

4、对背景图片设置属性：background-size：cover；可以实现背景图片适应div的大小。background-size有3个属性：auto：当使用该属性的时候，背景图片将保持100 的大小显示，不进行任何缩放。超过div的多余部分将被隐藏。

5、首先需要新建一个HTML页面。然后输入页面的标题，可以按照下方图中的进行设置。

Q2: html5设置图片自适应屏幕宽度

1、可以用JS监控屏幕大小，然后调整Canvas的大小。

2、HTML网页的开发中，需要对大小不一的屏幕兼容，使图片在不同的设备中可以展示预期的效果。

3、html5中是通过css3的background-size来控制自适应的。

Q3: css中图片如何自适应高度

首先，打开html编辑器，新建html文件，例如：index.html。在index.html中的标签中，输入css代码：body {background： url(image12jpg) no-repeat； background-size： cover；}。

在IE6中有效。◎ overflow：hidden； 超出的部分隐藏，避免控制图片大小失败而引起的撑开变形。有时候图片太大，会破环网页整齐的布局。

div的高度随背景图片的高度变化：原理是通过padding-top或者padding-bottom实现，值是背景图片的宽高比。

Q4: css样式控制图片大小

1、◎ overflow：hidden； 超出的部分隐藏，避免控制图片大小失败而引起的撑开变形。有时候图片太大，会破环网页整齐的布局。

2、CSS1 之前是不能设置背景图大小的，CSS3就可以通过background-size来设定图片大小，可以是像素或者是百分比。例如background-size：100px 200px；表示把背景图片大小调整为100x200px。

3、css背景图片大小能设置吗？如果可以，如何设置？下面我们来看下。先看下我们图片的样式，现在并没有设置背景图片的大小。刷新页面，看下现在的图片，并没有显示完整，因为图片太大了，没有显示完。

4、输入css样式代码：body {background： url(imagejpg) no-repeat；background-size： 250px；}。最后，浏览器运行index.html页面，此时用CSS强制了图片占用250px宽度的大小并且是等比例自动缩放。

5、网页的某些装饰可以通过背景图片来渲染，使得网页更加美观，CSS设置背景图片，不仅仅是大小，还有位置，放大方式，透明化之类。都是必备的CSS技能。

Q5: 如何使用CSS强制图片自适应大小

1、在IE6中有效。◎ overflow：hidden； 超出的部分隐藏，避免控制图片大小失败而引起的撑开变形。有时候图片太大，会破环网页整齐的布局。

2、一是通过将该图片设定为某个div的背景图片，然后该div的长宽不使用绝对的px，使用相对的em或者rem。二是将图片设定display：block，设定图片的长宽为rem或者em。

3、首先，打开html编辑器，新建一个html文件，例如：index.html。其次，在index.html中的标签中，输入css样式代码：body {background： url(imagejpg) no-repeat；background-size： 250px；}。

4、当遇到这样的DIV CSS布局时候，其实非常简单，我们只需要对图片宽度进行控制，而图片高度不用设置即图片高度会自动适应缩放比例（不设置高度即高度值默认为auto自适应）。

关于css自适应图片样式和css实现自适应布局的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。