Community Learn Tools Library Leisure

English

Home > Web Front-end > JS Tutorial > Pictures based on jquery are centered up, down, left, and right in unknown containers at various resolutions_jquery

Pictures based on jquery are centered up, down, left, and right in unknown containers at various resolutions_jquery

WBOY

Release： 2016-05-16 16:48:43

Original

1128 people have browsed it

DIV:

Copy code The code is as follows:

${pic.desc}

CSS:

Copy code The code is as follows:

.pic_conent{
height: 720px;/* This height will be changed by js*/
text-align: center;
display: table-cell;
vertical-align: middle;
}
.pic_layer{text-align: center; width:100%; display:inline-block; vertical-align:middle;}

jquery:

Copy code The code is as follows:

$(function() {
var surH = $(window).height();
$(".pic_conent").height(surH);
window.onresize=function(){
var surH = $(window).height() ;
$(".pic_conent").height(surH);
} 

Related labels：

picture center

source：php.cn

Previous article：A simple progress bar effect example implemented by jquery_jquery Next article：Two multi-select selects (multiple left and right) add, delete options and value examples_jquery

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Latest Articles by Author