html css 如何将图片作为背景,CSS背景图片和HTML中的img标签

背景图片：

该图片是218*170

css内容：

div{

width: 100px;

height: 100px;

background: url(img/1.jpg);

border: 2px solid red;

}

div{

width: 500px;

height: 500px;

background: url(img/1.jpg);

border: 2px solid red;

}

背景图片的默认格式：

当图片大于div时，图片部分填充；当图片小于div时，图片同时水平平铺和垂直平铺(背景图片的大小不发生改变)。

可以通过background-size设置背景图片的大小

div{

width: 300px;

height: 300px;

border: 2px solid red;

background: url(img/1.jpg) no-repeat;

background-size: 100%,100%;

}

background-size: contain  图片的宽和高都在div内部时，停止缩放。图片能完整显示。

div{

width: 100px;

height: 100px;

border: 2px solid red;

background: url(img/1.jpg) no-repeat;

background-size: contain;

}

background-size: cover图片宽高比不变、铺满整个容器的宽高，而图片多出的部分则会被截掉；

div{

width: 100px;

height: 100px;

border: 2px solid red;

background: url(img/1.jpg) no-repeat;

background-size: cover;

}

background-size:contain 和cover

相同点： 都是将图片以**相同宽高比**缩放以适应整个容器的宽高。

不同点：

1.  在no-repeat情况下，如果容器宽高比与图片宽高比不同，

cover：图片宽高比不变、铺满整个容器的宽高，而图片多出的部分则会被截掉；(图片不完整)

contain:图片自身的宽高比不变，缩放至图片自身能完全显示出来，所以容器会有留白区域；(图片是完整的)

2.  在repeat情况下：cover:与上述相同；contain:容器内至少有一张完整的图，容器留白区域则平铺背景图，铺不下的再裁掉。

background-position: center center;使背景图片居中显示

没有使用时：

div{

width: 1000px;

height: 410px;

border: 2px solid red;

background-image: url(img/2.jpg);

}

使用background-position: center center;时，背景图片居中显示

div{

width: 1000px;

height: 410px;

border: 2px solid red;

background-image: url(img/2.jpg);

background-position: center center;

}

img标签中的图片

如果img设置了宽，图片的宽和高是等比缩放

img{

width: 640px;

}

img{

width: 320px;

}

两种结合的轮播效果

屏幕大于768px时，高度设置410px，高度不发生改变，宽度一直变化，且图片一直居中。

屏幕小于768时,div不设置宽度，并在div中添加img标签

@media (min-width: 768px) {

#main_ad > .carousel-inner > .item {

height: 410px;

}

}

#main_ad > .carousel-inner > .item > img {

width: 100%;

}

上面的做法有一个不足的地方：容器的高度由img标签决定，当网速慢时，图片一点一点地加载，img的高度逐渐增大，这样页面出现抖动，可以设置img容器的高度和宽度成比例，该比例等于图片的宽高比，利用padding-bottom：xxx%,height:0;padding充当高度，此时img的display：absolute，left：0；top:0;

js文件

$(function() {

// 当文档加载完成才会执行

/**

* 根据屏幕宽度的变化决定轮播图片应该展示什么

* @return {[type]} [description]

*/

function resize() {

// 获取屏幕宽度

var windowWidth = $(window).width();

// 判断屏幕属于大还是小

var isSmallScreen = windowWidth < 768;

// 根据大小为界面上的每一张轮播图设置背景

// $('#main_ad > .carousel-inner > .item') // 获取到的是一个DOM数组(多个元素)

$('#main_ad > .carousel-inner > .item').each(function(i, item) {

// 因为拿到是DOM对象 需要转换

var $item = $(item);

// var imgSrc = $item.data(isSmallScreen ? 'image-xs' : 'image-lg');

var imgSrc =

isSmallScreen ? $item.data('image-xs') : $item.data('image-lg');

// jQuery方式

// $element.data()

// 是一个函数 ，专门用于取元素上的自定义属性(data-abc)

// 函数的参数是我们要取得属性名称(abc)

//

// $element.attr('data-abc')

//

// JS中的写法

// element.dataset['abc']

//

// element.getAttribute('data-abc')

// element.setAttribute('data-abc','')

// 设置背景图片

$item.css('backgroundImage', 'url("' + imgSrc + '")');

//

// 因为我们需要小图时 尺寸等比例变化，所以小图时我们使用img方式

if (isSmallScreen) {

$item.html('

');

} else {

$item.empty();

}

});

}

// $(window).on('resize', resize);

// // 让window对象立即触发一下resize

// $(window).trigger('resize');

$(window).on('resize', resize).trigger('resize');

});