如何确定webkit Chrome和Safari浏览器的图像高度和宽度

How do you determine an image height and width for webkit Chrome and Safari browsers?

本文关键字：图像 高度 Safari 何确定 webkit Chrome 浏览器      更新时间：2023-09-26

伙计们！这是我的第一个问题。我已经收集了这个小脚本，它只需使用一个类就可以同时将元素水平和垂直居中。来了

(function ($) {
$.fn.vAlign = function() {
return this.each(function(i){
var h = $(this).height();
var oh = $(this).outerHeight();
var mt = (h + (oh - h)) / 2;
$(this).css("margin-top", "-" + mt + "px");
$(this).css("top", "50%");
$(this).css("position", "absolute");
});
};
})(jQuery);
(function ($) {
$.fn.hAlign = function() {
return this.each(function(i){
var w = $(this).width();
var ow = $(this).outerWidth();
var ml = (w + (ow - w)) / 2;
$(this).css("margin-left", "-" + ml + "px");
$(this).css("left", "50%");
$(this).css("position", "absolute");
});
};
})(jQuery);
$(document).ready(function() {
$(".vAlign").vAlign();
$(".hAlign").hAlign();
});

除了图像（<img/>）和仅在webkit浏览器（Chrome和Safari）上，我使用类"vAlign"或"hAlign"（或两者）成功地将ANYTHING相对于任何容器（具有"position:relative"）居中。这意味着，在这个例子中；

<div class="hAlign vAlign">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eu dui eget nulla condimentum gravida. Vivamus erat leo, ultricies quis, gravida a, fringilla eu, urna. Pellentesque a mauris ac nisl semper egestas. Pellentesque ut elit in pede mattis gravida. Donec ac lectus a nisi suscipit placerat. Maecenas quis ipsum. Pellentesque mattis tellus. Suspendisse sollicitudin accumsan tortor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed metus. Quisque et leo at erat rutrum lobortis. In tempus lectus eget ligula convallis tristique.
</div>
<img class="hAlign vAlign" src="http://rlv.zcache.es/cara_de_lol_etiquetas_redondas-p217382006305499446envb3_400.jpg" alt="lol" />

div将在任何浏览器上水平和垂直居中，任何其他不是"img"（甚至是"input"或"button"）的标记也是如此。但是，img不会集中在webkit浏览器上。

我到处找过，但要么没有找到答案，要么我不明白。我基本上不知道JS，所以如果这是一个愚蠢的问题，请原谅我。

提前感谢！

要测量图像的宽度和高度，必须确保图像下载正确。

有两种解决方案：

  1. 您可以通过等待窗口加载事件来等待下载所有文件：window.onload与document.ready jQuery

    $(window).on('load', function(){
  ...
});

  2. 有一个"imagesLoaded"插件可以帮助您解决这个问题。它不需要jQuery，并且允许等待加载单个或多个图像：http://desandro.github.io/imagesloaded/

    $.fn.vAlign = function(){
  this.imagesLoad().always(function(){
    ...
  });
  return this;
};
相关文章：