背景图片:
该图片是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('<img src="' + imgSrc + '" alt="" />');
} else {
$item.empty();
}
});
}
// $(window).on('resize', resize);
// // 让window对象立即触发一下resize
// $(window).trigger('resize');
$(window).on('resize', resize).trigger('resize');
});