css中如何调整插入背景图片的大小
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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/background.jpg" height="100%" width="100%"/>
</div>
<div id="formbackground" style="position:absolute; z-index:-1;"><img src="10.jpg" height="100%" width="100%"/></div>
<script type="text/javascript">
$(function()
$('#formbackground').height($(window).height());
$('#formbackground').width($(window).width());
);
</script>
方法二：全浏览器兼容
.bg
background:url(http://wyz.67ge.com/wp-content/uploads/qzlogo.jpg);
filter:"progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale')";
-moz-background-size:100% 100%;
background-size:100% 100%;
参考技术A一、html标签内控制宽度高度
Img标签教程：
1、我们在HTML布局时候直接在图片img标签加宽度和高度属性即可控制图片高和宽；
2、我们可以直接在图片标签设置宽度width和高度height，这里需要注意的是HTML img标签内直接设置宽度和高度值不需要html单位，默认为PX像素；
3、img标签内设置高度宽度优点直观，对于文章内插入图片可以利用此方法控制设置图片高度宽度；缺点，如果图片列表排版的这样会增加很多HTML代码，不便统一修改。
二、CSS样式控制width、height
语法：imgwidth:150px;height:60px
这里设置CSS宽度为150px,css高度为60px,注意是CSS样式中css width和css height的值都带单位也要记住一定带上单位，这里和HTML img标签内设置高度宽度不带单位一定区别大家一定注意并记住此知识点。
如果是我们直接对img设置样式，这样会将整个网页中图片宽度高度控制了。为了控制指定对象内的图片宽度高度样式，我们通常在img前加上对象CSS命名。
假如我们要控制.divcss5内图片样式，那我们语法如下：
.divcss5 imgwidth:150px;height:60px
解释语法结构：对象选择器命名加一个空格然后输入img接着“...”构成控制指定对象内图片样式。
三、CSS设置IMG图片宽度和高度实例
1、CSS设置图片实例描述
我们在一个HTML中放图片，1张为原始大小图片，1张为通过CSS设置宽度和高度图片，通过2张图片对比分析通过CSS改变图片大小。
2、实例完整HTML+CSS代码如下：
<!DOCTYPE html>
<html>
<head> <meta charset="utf-8" />
<title>css控制图片大小在线示 www.divcss5.com</title>
<style> .divcss5 img width:300px; height:100px </style>
</head>
<body>
<p><strong>原始图片大小</strong></p>
<p><img src="divcss5-logo-201305.gif"><br> 本身这个图片宽度为165px高度60px</p>
<p><strong>通过CSS改变设置图片大小</strong></p>
<div class="divcss5"> <img src="divcss5-logo-201305.gif"><br> 这里设置divcss5盒子里图片宽度300px高度100px </div>
</body>
</html>
两处使用图片为同一张图片，以便观察效果。
3、图片大小设置实例截图
从上图我们能看出CSS改变IMG图片大小，从而让图片比原始的大。
扩展资料：
层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。
参考资料：百度百科-css
参考技术B在css中控制插入背景图片的大小用background-size
background-size使用语法有下面四种情况
background-size: length|percentage|cover|contain
length用法：
background-size:100px； //背景图片显示的宽和高为100像素
background-size:100px 160px；//背景图片显示的宽为100像素，高为600像素
percentage用法：
background-size：60%； //背景图片的显示宽度和高度是图片大小60%；
background-size：60% 80%； // 背景图片的显示宽度是图片大小的60%，高度是80%；
cover用法：
background-size：cover； //把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。
contain用法：
background-size：contain； //把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。
扩展资料
background-size属性浏览器支持
表格中的数字表示支持该属性的第一个浏览器版本号。
紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号。
参考资料
百度百科——background(计算机专业术语)
参考技术C1、首先设置背景颜色，只要改变body的bgcolor属性，完成以下步骤。。
2、设置HTML网页的背景图片得用background属性，注意文件路径如果和网页在一个文件夹内只要写图片名字。
3、如果要在网页中插入图片，则得调用<img src="URL">。以这个公式进行改正；完成以下步骤。
4、如果要设置图片大小，只要改变width和height属性即可，在完成以下步骤。
5、默认的文字图像的排列是文字靠下，修改文字与图片的位置，完成以下步骤。
在访问报告中插入图片并调整其大小
我正在开始一个包含考试问题的Access数据库。几乎每个问题都会附上一张照片。我宁愿不将图片保存在数据库中以保持较小。
我想在报告中插入这些图片。图片必须具有相同的宽度（报告的宽度），但必须根据原始宽高比调整高度。有些图片是风景，有些是肖像。
我现在花了三天时间在互联网上搜索，但仍然无法找到可行的解决方案。这似乎不应该这么难！？
我使用的是Office 365，VBA 7.1和Windows 10.我不是程序员，上次使用Access时间很早（Access 97）。
请帮忙。
伊莎贝拉
最后它非常简单。我发布了解决方案，也许它会在三天内保存其他人。
只是为了解释这些名字。
ImageSource是一个包含文件路径的文本框。
ImageFrame是我放在报告上的空图像。
代码放在我的报告中的GroupHeader的OnFormat部分。
9996略小于我的报告宽度，它是缇。
这是代码：
Private Sub GroupHeader3_Format(Cancel As Integer, FormatCount As Integer)
Me![ImageFrame].Picture = Me![ImageSource]
Me![ImageFrame].Width = 9996
Me![ImageFrame].Height = 9996 * Me![ImageFrame].ImageHeight / Me![ImageFrame].ImageWidth
End Sub
以上是关于css中如何调整插入背景图片的大小的主要内容，如果未能解决你的问题，请参考以下文章