css如何拉伸图片(css如何拉伸图片大小)

css如何拉伸图片,css如何拉伸图片大小

内容导航：

CSS中如何设拉伸背景图片铺满屏幕

css如何设置图片限定拉伸

css如何把图片圆形

在css中设置图片的背景图，怎么设置图片纵向拉伸

一、CSS中如何设拉伸背景图片铺满屏幕

body{background: url(“”) no-repeat;height:100%;width:100%;overflow:
hidden;background-size:cover;或者background-
size:100%;}扩展资料:CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。 CSS
能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。编程工具记事本：使用Windows系统自带的记事本可以编辑网页。只需要在保存文档时，以.html为后缀名进行保存即可。Dreamweaver：它与Flash、Fireworks并称网页三剑客。Dreamweaver是集网页制作和管理网站于一身的所见即所得网页编辑器，它是第一套针对专业网页设计师特别开发的视觉化网页开发工具，利用它可以轻而易举地制作出充满动感的网页。参考资料来源：百度百科:CSS

二、css如何设置图片限定拉伸

就像这个，绿色部分超过了黄色的界线！

如果设置图片的大小在img 标签中设置在只设置width，现在可以了！但又有新问题了现在！图片和文字都变了左对齐了而不是居中的！用margin: 0
auto;居中的话图片就离顶部距离近了，用什么方法把它设置离顶部”xx”px啊？用这个background-position:top
center;的话图片却是左对齐的？？那么居中又用哪个？

忘了我是用火狐做调试的！

黄色框设置溢出隐藏

overflow:hipen;

设置图片的大小。
。
。
在img 标签中 设置width和height 、、

在CSS中的背景定义可以是加上这个代码：

{

background:url(../images/***.gif) 2px 8px no-repeat;

overflow:hipen;

width:**px;

height:**px;

}

background中的2PX 和8PX表示图片与左侧和顶部距离的像素大小，no-repeat表示图片不重复，看楼主提的问题应该就是这个，图片重复了。

还有就是超出部分设置为隐藏。

还可以直接在CSS中定义图片长和宽。

如还有问题可以联系

试试用PADDING 控制！内间距设置

三、css如何把图片圆形

答：＆lt;divstyle=＆quot;width:100px;height:100px;border-
radius:50%;overflow:hidden;＆quot;＆gt;＆lt;imgsrc=＆quot;＆quot;＆gt;＆lt;/div＆gt;需要浏览器支持CSS3，注意div的宽高要一样，也可以直接把样式添加在img上，但不建议那样

四、在css中设置图片的背景图，怎么设置图片纵向拉伸

css中设置背景图拉伸填充，在css2.1之前这个背景的长宽值是不能被修改的。
实际的结果是只能重复显示，可以使用repeat,repeat-x,repeat-y,no-
repeat这些属性来控制背景图片的显示。所以一般用作背景图片的有2类： 1.是一整张大图，尺寸和区域大小刚好吻合
2.一个很小的条状图，通过repeat后，形成一个很规则的大图背景。 css3出现以后，可以用background-size 属性来实现背景图拉伸填充。
而且这个属性在firefox，chrome，以及ie9上都可以使用。具体使用方法如下： 背景图尺寸（数值表示方式）： #background-size{
background-size:200px 100px; } 背景图尺寸（百分比表示方式）： #background-size{ background-
size:30% 60%; } 背景图尺寸（等比扩展图片来填满元素，即cover值）： #background-size{background-
size:cover; } 背景图尺寸（等比缩小图片来适应元素的尺寸，即contain值）： #background-size{ background-
size:contain; } 背景图尺寸（以图片自身大小来填充元素，即auto值）： #background-size{ background-
size:auto; }