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');
});