基于jquery實現(xiàn)的圖片在各種分辨率下未知的容器內(nèi)上下左右居中
更新時間:2014年05月11日 12:33:04 作者:
這篇文章主要介紹了基于jquery實現(xiàn)的圖片在各種分辨率下未知的容器內(nèi)上下左右居中的方法,需要的朋友可以參考下
DIV:
復(fù)制代碼 代碼如下:
<div class="pic_conent">
<div class=" fn-pr pic_layer">
<!--圖片文字介紹透明層-->
<section class="bg text_layer_home p10 font-yahei fn-bc">
<h2 class="f14 fefefe">${pic.desc}</h2>
<aside class="f12 bbb">
<c:if test="${not empty pic.poi}">
<span class="scenery fn-fl">${pic.poi}</span>
</c:if>
<span class="fn-fr mt10">by ${pic.username}</span>
</aside>
</section>
<img src="${pic.picUrl}" width="320" height="420" />
</div>
</div>
CSS:
復(fù)制代碼 代碼如下:
.pic_conent{
height: 720px;/*這個高度會被js改掉*/
text-align: center;
display: table-cell;
vertical-align: middle;
}
.pic_layer{text-align:center; width:100%; display:inline-block; vertical-align:middle;}
jquery:
復(fù)制代碼 代碼如下:
$(function() {
var surH = $(window).height();
$(".pic_conent").height(surH);
window.onresize=function(){
var surH = $(window).height();
$(".pic_conent").height(surH);
}
您可能感興趣的文章:
相關(guān)文章
JQuery 綁定事件時傳遞參數(shù)的實現(xiàn)方法
JQuery 綁定事件時傳遞參數(shù)的實現(xiàn)方法,需要的朋友可以參考下。2009-10-10jQuery對象和DOM對象的相互轉(zhuǎn)化實現(xiàn)代碼
jQuery對象就是通過jQuery包裝DOM對象后產(chǎn)生的對象。jQuery對象是jQuery獨有的,其可以使用jQuery里的方法,但是不能使用DOM的方法;例如$("#img").attr("src","test.jpg"); 這里的$("#img")就是jQuery對象;2010-03-03jquery實現(xiàn)簡單的swiper輪播預(yù)覽原圖
這篇文章主要為大家詳細介紹了jquery實現(xiàn)簡單的swiper輪播預(yù)覽原圖,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下2022-02-02