[英]Align background image middle and center
這是html:
<div class="gallerybox">
<a href="/CustomContentRetrieve.aspx?ID=398791">
<img alt="" src="/Utilities/image.jpg" width="400" height="400" />
</a>
</div>
這是CSS:
.gallerybox {width:200px;height:200px;overflow:hidden;}
誰能告訴我在div.gallerybox中(垂直)和中心(水平)內對齊鏈接圖像的方法嗎? 也許使用javascript,jQuery或僅使用CSS?
也許像下面這樣:
<div class="gallerybox">
<a href="/CustomContentRetrieve.aspx?ID=398791">
<img id="imgUtility" class="galleryImage" alt="" src="/Utilities/ShowThumbnail.aspx?USM=1&W=400&H=400&R=1&Img={tag_image_value}" />" />
</a>
</div>
.gallerybox {
width:200px;
height:200px;
overflow:hidden;
}
<!-- Edit Again -->
<script language="javascript">
window.onload = fixImage;
function fixImage() {
var img = document.getElementById('imgUtility');
var x = img.offsetWidth;
var y = img.offsetHeight;
img.style.left = -(x / 2);
img.style.top = -(y / 2);
}
</script>
傑克遜 我將建議您進行一些HTML重寫,雖然我知道這不可能,但是我認為這可能是解決問題的最有效方法。
用該數據庫編碼的<img>
創建一個隱藏圖像:
img#imgUtility {
display: none;
}
(CSS和HTML)
<img id="imgUtility" class="galleryImage" alt=""
src="/Utilities/ShowThumbnail.aspx?USM=1&W=350&H=350&
R=1&Img={tag_image_value}" />
已加載網頁和圖像解決了一個實際的URL在此之后,你可以替換<img>
與<span>
在您發布的HTML,設置隱藏標簽src
的背景圖像<span>
使用它的內嵌style
通過JavaScript屬性:
// galleryBoxLinkTarget should be a reference to the <a> in a div.galleryBox
function imgReplacement(galleryBoxLinkTarget) {
var span = document.createElement("span");
var img = document.getElementById("imgUtility");
span.style.backgroundImage = "url('" + img.getAttribute("src") + "')";
span.className = "imgReplacement";
galleryBoxLinkTarget.appendChild(span);
}
(JavaScript和HTML)
<div class="gallerybox">
<a href="/CustomContentRetrieve.aspx?ID=398791">
<!-- <span> goes here -->
</a>
</div>
然后執行一些巧妙的CSS編寫:
span.imgReplacement {
display: block;
background-position: 50% 50%;
background-repeat: no-repeat;
width: 200px;
height: 200px;
}
無論尺寸如何,這都應使圖片居中,並允許您刪除內聯width
和height
屬性。 希望這對您有用!
嘗試這個:
<style type="text/css">
.gallerybox {text-align:center;vertical-align:middle;height:400px;line-height:400px;}
.gallerbox img {display:inline; vertical-align:middle;}
</style>
<div class="gallerybox">
<a href="/CustomContentRetrieve.aspx?ID=398791">
<img alt="" src="/Utilities/image.jpg" />
</a>
使用一個名為center的簡單JQuery fn(用法:$(element).center()):
jQuery.fn.center = function() {
this.css("position","absolute");
this.css("top", (($(window).height() - this.outerHeight()) / 2) + $(window).scrollTop() + "px");
this.css("left", (($(window).width() - this.outerWidth()) / 2) + $(window).scrollLeft() + "px");
this.css("bottom", (($(window).width() - this.outerWidth()) / 2) + $(window).scrollLeft() + "px");
return this;
}
$(document).ready(function(){
$(#imgUtility).center();
)};
使用HTML:
<div class="gallerybox">
<a href="/CustomContentRetrieve.aspx?ID=398791">
<img id="imgUtility" class="galleryImage" alt="" src="/Utilities/ShowThumbnail.aspx?USM=1&W=400&H=400&R=1&Img={tag_image_value}" />" />
</a>
</div>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.