The main problem is in the picture carousel Figure responsive issues
purpose
Variety of terminals need to properly display images
The mobile terminal should use a smaller (volume) of the image
Method to realize
Add two data- attributes to the label (such as: data-img-sm = "Path panel", data-img-lg = "big picture route")
Get the width of the screen by way of JS;
Determining screen width is smaller than a certain value (for example: 768)
The determination of decisions using specific large or small FIG FIG
Specific implementation steps:
1. Get the screen width
2. The judge is a large or small screen
3. FIG broadcast provided according to each of the background on a screen of the size of the wheel
$(function () {
function resize() {
var windowWidth = $(window).width();
var isSmallScreen = windowWidth < 768;
$('#main_ad > .carousel-inner > .item').each(function (i, item) {
var $item = $(item);
$item.css("backgroundImage", 'url("'+$item.data(isSmallScreen ? "image-xs" : "image-lg")+'")');
if(isSmallScreen){
$item.html("<img src='"+$item.data(isSmallScreen ? "image-xs" : "image-lg")+"' alt=''/>");
}else {
$item.empty();
}
});
}
$(window).on('resize', resize).trigger('resize');
});
window resize事件
- Due to the process of the previous step to achieve our means once the page loads to determine,
- when after the user did not manually adjust the width of the page is changed,
- so we can solve this problem through the window resize event of re-completion of the above operation
After executing the function name change window function () {
// specific operating
}
$ (window) .on ( 'a resize', after the execution function name change window);
This event will only be executed after the window size changes, but we need to execute once when the start
$ (Window) .on (executed after the function name, change window 'resize') .trigger ( 'resize');
Small picture not need to use background mode
If you still use a small map in the background mode, when the screen is particularly small, poor results
So when using the panel, instead manner img
// change in ratio of small dimensions, etc. FIG we need, so we use small FIG img embodiment
IF (isSmallScreen) {
$ item.html ( '<img the src = "' + IMGSRC + '" Alt = "" />' );
} the else {
$ item.empty ();
}
According to the current situation, if the display panel is not required to the container by a fixed height 410px
So we can be solved by way of CSS media queries
#main_ad > .carousel-inner > .item {
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
}
@media (min-width: 768px) {
#main_ad > .carousel-inner > .item {
height: 410px;
}
}
#main_ad > .carousel-inner > .item > img {
width: 100%;
}
purpose
Variety of terminals need to properly display images
The mobile terminal should use a smaller (volume) of the image
Method to realize
Add two data- attributes to the label (such as: data-img-sm = "Path panel", data-img-lg = "big picture route")
Get the width of the screen by way of JS;
Determining screen width is smaller than a certain value (for example: 768)
The determination of decisions using specific large or small FIG FIG
Specific implementation steps:
1. Get the screen width
2. The judge is a large or small screen
3. FIG broadcast provided according to each of the background on a screen of the size of the wheel
$(function () {
function resize() {
var windowWidth = $(window).width();
var isSmallScreen = windowWidth < 768;
$('#main_ad > .carousel-inner > .item').each(function (i, item) {
var $item = $(item);
$item.css("backgroundImage", 'url("'+$item.data(isSmallScreen ? "image-xs" : "image-lg")+'")');
if(isSmallScreen){
$item.html("<img src='"+$item.data(isSmallScreen ? "image-xs" : "image-lg")+"' alt=''/>");
}else {
$item.empty();
}
});
}
$(window).on('resize', resize).trigger('resize');
});
window resize事件
- Due to the process of the previous step to achieve our means once the page loads to determine,
- when after the user did not manually adjust the width of the page is changed,
- so we can solve this problem through the window resize event of re-completion of the above operation
After executing the function name change window function () {
// specific operating
}
$ (window) .on ( 'a resize', after the execution function name change window);
This event will only be executed after the window size changes, but we need to execute once when the start
$ (Window) .on (executed after the function name, change window 'resize') .trigger ( 'resize');
Small picture not need to use background mode
If you still use a small map in the background mode, when the screen is particularly small, poor results
So when using the panel, instead manner img
// change in ratio of small dimensions, etc. FIG we need, so we use small FIG img embodiment
IF (isSmallScreen) {
$ item.html ( '<img the src = "' + IMGSRC + '" Alt = "" />' );
} the else {
$ item.empty ();
}
According to the current situation, if the display panel is not required to the container by a fixed height 410px
So we can be solved by way of CSS media queries
#main_ad > .carousel-inner > .item {
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
}
@media (min-width: 768px) {
#main_ad > .carousel-inner > .item {
height: 410px;
}
}
#main_ad > .carousel-inner > .item > img {
width: 100%;
}