[英]Get current Image width and height after max-width and max-height are applied
這是我的例子
HTML:
<div class="container">
<img src="http://placehold.it/500x500" alt="500x500" />
</div>
<div class="container">
<img src="http://placehold.it/100x500" alt="100x500" />
</div>
<div class="container">
<img src="http://placehold.it/500x100" alt="500x100" />
</div>
<div class="container">
<img src="http://placehold.it/500x800" alt="500x800" />
</div>
<div class="container">
<img src="http://placehold.it/800x500" alt="800x500" />
</div>
<div class="container">
<img src="http://placehold.it/100x100" alt="100x100" />
</div>
<div class="container">
<img src="http://placehold.it/200x100" alt="200x100" />
</div>
CSS:
div.container { width: 200px; height: 200px; line-height: 200px; overflow: hidden; border: 10px solid white; box-shadow: 0 1px 8px #BBB; margin: 10px; text-align: center; }
div.container img { position: relative; vertical-align:middle; }
div.container img.wide { max-height: 100%; }
div.container img.tall { max-width: 100%; }
div.container img.square { max-width: 100%; }
使用Javascript:
$(window).load( function(){
var $imgs = $("div.container img");
$imgs.each( function(){
var cW = $(this).parent().width();
var cH = $(this).parent().height();
var w = $(this).width(); //I want the CURRENT width, not original!!
var h = $(this).height(); //I want the CURRENT height, not original!!
var dW = w - cW;
var dH = h - cH;
console.log( cW + " " + cH + " " + w + " " + h + " " + dW + " " + dH );
if ( w > h ){
$(this).addClass("wide");
$(this).css("left", -dW/2);
}
else if ( w < h ){
$(this).addClass("tall");
$(this).css("top", -dH/2);
}
else { $(this).addClass("square"); }
});
});
我通過javascript將一個類添加到圖像元素的基礎上。 這3個類將設置圖像的max-width和max-height css屬性,從而調整它們的大小。 在那之后,我需要調整大小的圖像的尺寸,但我能得到的只是原始圖像的尺寸。 那不好! 我嘗試使用width()
, outerWidth
, naturalWidth
,各種寬度,但我無法正確使用它。
那么,是否有一種方法可以在應用了max-width
和max-height
等CSS規則后獲得圖像的尺寸? 優選地是一致的方式,不使用定時器和間隔,或類似的東西。
非常感謝!
看看這個 jsfiddle。 在應用具有max-height
/ max-width
而不是應用它之后,您正試圖獲得widht / height。
這是測試代碼(檢查第二個console.log):
$(window).load( function(){
var $imgs = $("div.container img");
$imgs.each( function(){
var cW = $(this).parent().width();
var cH = $(this).parent().height();
var w = $(this)[0].clientWidth; //I want the CURRENT width, not original!!
var h = $(this)[0].clientHeight; //I want the CURRENT height, not original!!
var dW = w - cW;
var dH = h - cH;
console.log( cW + " " + cH + " " + w + " " + h + " " + dW + " " + dH );
if ( w > h ){
$(this).addClass("wide");
$(this).css("left", -dW/2);
}
else if ( w < h ){
$(this).addClass("tall");
$(this).css("top", -dH/2);
}
else { $(this).addClass("square"); }
var w = $(this).width(); //I want the CURRENT width, not original!!
var h = $(this).height(); //I want the CURRENT height, not original!!
console.log( w + " " + h );
});
});
width()
, outerWidth
- 這總是返回當前寬度。
naturalWidth
/ naturalHeight
- 這是為了獲取原始文件,例如沒有應用任何樣式,圖像的寬度/高度(僅適用於較新瀏覽器的IMG標記)
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.