CSS控制图片自适应大小
CSS控制图片自适应大小
一、网页制作技巧实例解决：用CSS控制图片自适应大小
图片自动适应大小是一个非常常用的功能，在进行制作的时候为了防止图片撑开容器而对图片的尺寸进行必要的控制，我们可不可以用CSS控制图片使它自适应大小呢？
我们想到了一个比较简单的解决方法，虽然不是非常的完美，如果您的要求不是非常高，已经可以满足你的需要了。
我们看下面的代码：
div img {
max-width:600px;
width:600px;
width:expression(document.body.clientWidth>600?"600px":"auto");
overflow:hidden;
}
◎max-width:600px; 在IE7、FF等其他非IE浏览器下最大宽度为600px。
但在IE6中无效。
◎width:600px; 在所有浏览器中图片的大小为600px;
◎当图片大小大于600px，自动缩小为600px。
在IE6中有效。
◎overflow:hidden; 超出的部分隐藏，避免控制图片大小失败而引起的撑开变形。
二、有时候图片太大，会破环网页整齐的布局。
这时可以用css来强制按比例压缩图片的高度或宽度
css代码如下：
img,a img{
border:0;
margin:0;
padding:0;
max-width:590px;
width:expression(this.width>590?"590px":this.width);
max-height:590px;
height:expression(this.height>590?"590px":this.height);
}
这样当图片的高度或宽度若超过590px，将会按比例压缩成590px，如果不超过则按原大小显示。
background-size用法
background-size用法`background-size` 是用于设置背景图片大小的CSS 属性。
它可以用于背景图片的大小调整，以适应元素的背景区域。
以下是`background-size` 的基本用法：语法:```cssbackground-size: value;```值：- `auto`: 默认值，背景图片的原始大小。
-`length`: 指定背景图片的宽度和高度，可以是像素（px）、百分比（%）等。
例如：`background-size: 100px 50px;`。
- `cover`: 背景图片将被缩放以完全覆盖背景区域，可能会裁剪图片。
- `contain`: 背景图片将被缩放以适应背景区域，可能会有留白。
- `initial`: 设置为默认值。
- `inherit`: 继承父元素的值。
示例：```css/* 设置背景图片大小为200 像素宽，100 像素高*/.element {background-image: url('example.jpg');background-size: 200px 100px;}/* 背景图片覆盖整个背景区域，可能会裁剪*/.element-cover {background-image: url('example.jpg');background-size: cover;}/* 背景图片适应整个背景区域，可能有留白*/.element-contain {background-image: url('example.jpg');background-size: contain;}```在这些例子中，`.element` 是一个具有背景图片的元素，通过`background-size` 设置背景图片的大小。
`.element-cover` 和`.element-contain` 分别演示了`cover` 和`contain` 的效果。
百度编辑器去掉图片间空隙,图片宽度自适应
增加一个普通按钮（上）让百度编辑器上传的图片无空行（空隙），在手机端展示的图片之间无空隙下面就让我们从最简单的功能开始UEditor的二次开发之旅：在工具栏上增加一个按钮，点击按钮的时候把编辑器中的所有图片设置为左浮动，宽度设为100%。
第一步：找到ueditor.config.js文件中的toolbars参数，增加一个“fixedpic”字符串，对应着添例如：下图为自定义了一个fixedpic的按钮第二步：找到ui/editorui.js文件中的btnCmds数组，在其中同样增加一个“fixedpic”字符串。
例如：1.4.3版的在ueditor.all.js中添加第三步：清空缓存刷新下页面吧！工具栏的对应位置是否出现了一个自己定义的按钮呢？如下图所示：由于此时未设置对应按钮的图片样式，所以会显示默认的“B”字符。
要想让其显示成自己需要的图标样式，接着按照下面的步骤动手吧。
第四步：找到themes/default/css/ueditor.css文件，增加一条样式定义:完成后刷新浏览器，可以看到此时图标已经显示为如下图所示：此处的样式定义了showmsg图标在UEditor默认的精灵Icon图片（themes/default/images/icons.png）中的位置偏移。
如需更改成另外图标，只需添加图标到该图片文件中，然后设置偏移值即可。
第五步：到此为止，在UI层面已经完成了一个工具栏图标的显示和各种状态变化的逻辑，但是我们发现点击按钮之后毫无反应。
那是必然的，我们还必须为该按钮绑定属于它自己的事件处理方法。
实质上，此时一个默认的事件处理方法已经被UEditor绑定到按钮上了，只不过由于我们还没有定义该方法的具体内容，所以点击之后无任何变化。
下面我们就来定义该方法的具体内容：效果如下：再次刷新页面点击一下按钮吧！点击按钮前点击后，图片间的空隙没了，且图片的宽度100%，去掉了高，这样图片就能在手机端自适应宽度和高度了！源码很简单，自己试试吧！本例子参考官网的/website/document.html文档制作本例子使用的jar包，请到官网/website/download.htmlueditor1_4_3-utf8-jsp.zip。
3种CSS实现背景图片全屏铺满自适应的方式
3种CSS实现背景图片全屏铺满自适应的方式WEB前端开发社区 2021-12-15 18:00一张清晰漂亮的背景图片能给网页加分不少，设计师也经常会给页面的背景使用大图，我们既不想图片因为不同分辨率图片变形，也不希望当在大屏的情况下，背景有一块露白，简而言之，就是实现能自适应屏幕大小又不会变形的背景大图，而且背景图片不会随着滚动条滚动而滚动。
因此，今天我们将与你分享3种CSS实现背景图图片全屏铺满自适应的方式，希望对你有所帮助。
01margin:0px;background: url(images/bg.png) no-repeat;background-size:100% 100%;background-attachment:fixed;url(images/beijing.png)——图片路径的位置；no-repeat——图片不重复；center 0px——center是距离页面左边的定位，0px是距离页面上面的定位；background-position: center 0——就是图片的定位，同上；background-size: cover;——把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。
背景图像的某些部分也许无法显示在背景定位区域中；min-height: 100vh;——视窗的高度，“视区”所指为浏览器内部的可视区域大小，即window.innerWidth/ window.innerHeight 大小。
02background: url("bg.png") no-repeat;height:100%;width:100%;overflow: hidden;background-size:cover;//或者background-size:100%;03给body标签指定背景图，这样背景图就可以填充整个浏览器viewport了。
其实，该方案对所有的块级容器都可以生效。
JS+css图片自动缩放自适应大小
JS+css图⽚⾃动缩放⾃适应⼤⼩我加了css的限制：复制代码代码如下:div img {}{max-width:600px;width:600px;width:expression(document.body.clientWidth>600?"600px":"auto");overflow:hidden;}◎ max-width:600px; 在IE7、FF等其他⾮IE浏览器下最⼤宽度为600px。
但在IE6中⽆效。
◎ width:600px; 在所有浏览器中图⽚的⼤⼩为600px; ◎当图⽚⼤⼩⼤于600px，⾃动缩⼩为600px。
在IE6中有效。
◎ overflow:hidden; 超出的部分隐藏，避免控制图⽚⼤⼩失败⽽引起的撑开变形。
在放图⽚的页⾯⾥加了复制代码代码如下:<script language="JavaScript">var imgObj;for( i = 0; i < document . getElementsByTagName("img") . length; i++ ){imgObj = document . getElementsByTagName("img")[i];//建议只判断⾼度或者宽度其中⼀个，那样可以⾃动按⽐例缩放if ( imgObj . width > 500 ) //判断图⽚的宽度，如果⼤于700，则设置为700，值可以⾃⼰修改{imgObj . width = 500}if ( imgObj . height > 700 ) //判断图⽚的⾼度，如果⼤于700，则设置为700，值可以⾃⼰修改{imgObj . height = 700}}</script>单独的图⽚控制，⽤这个：复制代码代码如下:<script>var abc=document.getElementById("abc");var imgs=abc.getElementsByTagName("img");for (var i=0,g;g=imgs[i];i++)g.onload=function(){if (this.width>300){this.width=300}else{if (this.height>300)this.height=300}} </script>测试在IE和FF下通过。
CSS控制背景图片100%自适应填充布局
CSS控制背景图⽚100%⾃适应填充布局原⽂地址：/wd4java/article/details/50537562.personal_head { width: 100%; height: 35%; background: url("../../../static/img/headbg.jpg") no-repeat; background-size: 100% 100%; position: absolute;filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='bg-login.png', sizingMethod='scale'); }做响应式布局的时候，如果有背景图，我们当然希望他能够全屏100%显⽰，这样显得页⾯⾮常的爆满，不过这⼜出现了⼀个问题，图⽚的尺⼨多⼤合适呢，现在的浏览器分辨率参差不齐，对于Firefox等⾼级的浏览器，使⽤Background-size设置为100%即可，⽽IE浏览器就需要不同设置。
在Firefox中，只需要⽤background-size则可以控制其随容器的⼤⼩⽽⾃动伸缩picLUp{background:url(logo.png)no-repeat;width:100%;height:40%;background-size:100%100%;}在这样的CSS控制之下，则可以在Firefox中达到背景图⽚随⽗容器⼤⼩⽽⾃动变化，达到填充效果，但是在IE之下，你会发现上⾯的CSS控制会很不理想，它并不会因为你有了background-size:100% 100%;⽽⾃动缩放，图⽚原本怎么样就怎么样显⽰，如果容器⽐图⽚⼩，则只能显⽰图上的⼀部分，那么要达到这个效果，则需要使⽤IE特有的滤镜。
AlphaImageLoader兼容性IE5.5+语法filter : progid:DXImageTransform.Microsoft.AlphaImageLoader ( enabled=bEnabled , sizingMethod=sSize , src=sURL )属性enabled: 可选项。
如何通过CSS实现背景图片自动平铺或拉伸至整个屏幕（自适应大小）
如何通过CSS实现背景图⽚⾃动平铺或拉伸⾄整个屏幕（⾃适应
⼤⼩）
默认情况下，通过HTML代码的BODY标签设置好背景图⽚<body background="x.jpg"> 后，图⽚会⾃动横向和纵向平铺。
这就会产⽣⼀些美观上的问题。
XP⼈提供CSS代码如下，放在页⾯头部即可，仅供参考： <style type="text/css"> body {
background:url(/img/background.png); background-repeat: repeat-x; background-positon: 100%,100%;} < /style>
续: 有⼏位朋友说我的这篇⽂章实在没能解决他们的问题，他们希望的是不考虑⾃⼰背景图⽚的⼤⼩，不管多⼤的屏幕，⾃⼰的背景图⽚⾃动上下拉伸⾃⼰，适应屏幕⼤⼩，铺满整个屏幕。
所以，我今天再把下⾯的代码和⼤家分享。
要想实现这样的效果，可以考虑使⽤滤镜。
<style type="text/css"> body{
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/skin/v2011/images/body.png',sizingMethod='scale'); background-repeat: no-repeat; background-positon: 100%, 100%; } < /style>。
背景图片自适应大小（css3）
背景图片自适应大小（css3）
展开全文
body {
background: url(/happytime/img/index.jpg) no-repeat center center fixed;
background-size: 100%;//此处要注意，可以填cover也可以填100%。
建议填100%
}
备注：折腾了俩个多小时，才解决一个bug，就在上面标注的那个需注意的地方。
background-size是一个css3属性。
原本设的置是cover，图片会填充屏幕。
但是发现在360极速浏览器下左边会有1像素的白边。
按照W3CShool给的值就三种：cover，contain，auto。
其实这里可以填像素也可以填百分比。
按理说百分比和cover是一个效果，但是在360极速浏览器里，就是差了那么一两个像素，别的浏览器都没问题。
其实准确的说是只有在360极速浏览器的极速模式里才有这个问题。
background-size的两个可选值的含义：contain是让背景图片恰好显示在容器中，图片的外边缘“顶着”容器的内边缘；而cover是覆盖容器，容器的外边缘“顶着”图片的内边缘。
另外，center是让图片居中定位，让图片的中部位于浏览器的中部。
fixed使得背景不会跟随滚动条移动。
HTML+CSS图片大小自适应~PC电脑端、手机端
HTML+CSS图⽚⼤⼩⾃适应~PC电脑端、⼿机端
写页⾯的时候经常会遇到需要图⽚⾃适应容器⼤⼩这样的情况：
<style>
div{width:400px;height:400px;border:1px solid #000; }
img{width:100%;height:100%;}
</style>
不管容器有多⼤，只要将img的宽⾼设置成100%（这⾥的100%是相对于⽗级宽⾼⽽⾔）就能⾃适应容器⼤⼩。
那是不是就这这么简单完事⼉了呢？如果你不介意图⽚被放⼤后可能出现失真的话也的确是这样就ok了。
假如你介意图⽚放⼤后会失真，我们可以改进上⾯的代码，只需要将img的样式简单修改.
img{max-width:100%;max-height:100%;}
max-width:100%和width:100%的区别在于,max-width是相对于img⾃⾝的尺⼨⽽⾔的。
意思是图⽚最⼤宽度为⾃⾝尺⼨的宽，在这⾥就是100px。
⽽width的100%我们上⾯已经说过了是相对于⽗级宽度的，所以为了不让图⽚被放⼤后失真我们可以设置img的最⼤宽度为⾃⾝尺⼨⼤⼩，更通俗的讲就是只允许缩⼩不允许放⼤img。
具体情况中是选择width:100%还是max-width:100%还是依据个⼈的需求⽽定，另外在响应式设计中这个问题稍微会复杂⼀点。
图⽚适应⼿机端要控制的是装图⽚的容器宽度
img{
display: block;(可不加 banner可以⽤)
height: auto;
max-width: 100%;（或者width：100%）
}
将以上标签加⼊之后保存，再⽤⼿机打开即是⾃适应⽹页了。
background-size（设置背景图片的大小）
background-size（设置背景图⽚的⼤⼩）设置背景图⽚的⼤⼩，以长度值或百分⽐显⽰（数值包括长度length和百分⽐percentage），还可以通过cover和contain来对图⽚进⾏伸缩。
语法：background-size: auto | <长度值> | <百分⽐> | cover | containbg-size = [ <length> | <percentage> | auto ]{1,2} | cover | contain并且会根据背景原点位置background-origin设置其图⽚覆盖的范围。
取值说明：1、auto：默认值，不改变背景图⽚的原始⾼度和宽度；length，percentage，根据给定长度值或者百分⽐来调整背景图⽚⼤⼩，第⼀个值为设置图⽚宽度，第⼆个值为图⽚的⾼度，但是不管是⽤什么值，都不能为负值；这三个值最⼩可重复⼀次，最⼤重复两次。
假如只给定⼀个值，那么第⼆个⾃动的为 'auto'；假如指定为percentage百分⽐值，那么背景图⼤⼩是根据相对的背景区域来做调整，这个背景区域是由background-origin来来决定的。
这⾥有必要提到假如background-attachment:fixed，那么其背景相对区域就是初始包含块也就是视窗。
/* ⼀个值: 这个值指定图⽚的宽度，那么第⼆个值为auto */background-size: autobackground-size: 50%background-size: 3embackground-size: 12px/* 两个值: 第⼀个值指定图⽚的宽度，第⼆个值指定图⽚的⾼度 */background-size: 50% autobackground-size: 3em 25%background-size: auto 6pxbackground-size: auto auto/*多重背景，请⽤逗号隔开，在CSS语法中凡语法后跟*或者#，都是可以⽆限重复的，但是必须⽤逗号隔开。
高度自适应的3种方法
高度自适应的3种方法
高度自适应是指网页元素能够根据内容的多少自动调整高度，
以适应不同屏幕尺寸和内容变化。
以下是三种常见的高度自适应方法：
1. 使用CSS的Flexbox布局，Flexbox是一种强大的布局模型，可以轻松实现高度自适应。
通过将容器设置为display: flex，并
使用align-items属性来控制元素在交叉轴上的对齐方式，可以使
元素根据内容自动调整高度。
2. 使用CSS的Grid布局，CSS Grid布局也是一种强大的布局
模型，可以实现高度自适应。
通过将网格容器设置为display: grid，并使用grid-template-rows属性来定义行高，可以让网格中
的元素根据内容自动调整高度。
3. 使用CSS的calc()函数，calc()函数可以在CSS中进行数
学运算，可以用来实现高度自适应。
例如，可以使用calc()函数来
计算元素的高度，让其根据内容的多少自动调整。
这些方法都可以帮助实现网页元素的高度自适应，让网页在不
同设备和内容情况下都能够呈现出最佳的布局效果。
当然，具体使用哪种方法取决于实际需求和兼容性考量。