Использование свойства jQuery CSS для центрирования изображения

Question

Вот фрагмент нормального кода с моего сайта для центрированных изображений:

<img width="600" alt="Image" src="img-src.jpg" style="width: 600px;"
 class="center" />

Я использую встроенные стили с классом center (css для center margin:0 auto;), чтобы центрировать мои изображенияна странице.Я не могу установить стандартную ширину для изображений с центральным классом, потому что изображения различаются по ширине.

Я знаю, что у jQuery есть свойство CSS, и это заставило меня задуматься, могу ли я использовать jQuery для считывания ширины изображения изСвойства изображения и автоматически вставьте width: *image-size pulled from img properties*px; в любое изображение, которое имеет класс центра, таким образом устраняя необходимость для меня вручную устанавливать ширину изображения для каждого изображения.

Пожалуйста, приведите примеры, так как я недостаточно владею JS, чтобы написать это сам.

Answer 1

Как насчет предоставления вашим изображениям контейнера с text-align : center:

<div style="text-align : center;">
    <img src="..." />
</div>

Вот демоверсия: http://jsfiddle.net/YfFht/

Решение CSS будет хорошим для производительности.

Answer 2

HTML

<div class="center">
  <img alt="Image" src="img-src.jpg" style="width: 600px;" />
</div>

CSS

.center {
  width: 100%;
  -webkit-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
  position: absolute; /*or fixed*/
  left: 50%;
  top: 50%;
  text-align: center;
}

Answer 3

Оберните изображение в родительский контейнер, такой как div, ширина и высота которого установлены на максимально допустимое значение. Затем используйте следующий плагин jQuery, чтобы центрировать их внутри div:

http://boxlight.github.com/bl-jquery-image-center/

Answer 4

Удалите встроенные стили из элементов img, а затем попробуйте этот код в событии загрузки окна, которое обеспечит загрузку всех ресурсов на странице.

$(window).load(function(){

    //You can grab the img dimensions as below.
    var width = $('imgSelector').width();
    var height = $('imgSelector').height();

    //Use `css` method to set the styles on the element.
    $('imgSelector').css({
        width: width,
        height: height
    });

    //E.g - this will set the width and height of all the images on the page
    $('img').each(function(){
        $(this).css({
             width: width,
             height: height
        });
    });

});

Answer 5

Используйте нагрузку, чтобы определить, когда изображение загружается.В анонимной функции для каждой получи ширину и примени ее как свойство css.

$('img').load( function() {
   $(this).css('width', $(this).width());
});

Answer 6

Вы бы посмотрели на $("img").width(), это даст вам ширину в пикселях с использованием целочисленного формата (поэтому, если ширина равна "width: 100px;", это будет "100").Но для того, чтобы это работало, для каждого изображения должен быть установлен атрибут width="", в противном случае у вас будет ошибка, и значение не будет возвращено.

Две ссылки для проверки:

http://api.jquery.com/width/

http://api.jquery.com/outerWidth/

Answer 7

Этот фрагмент jQuery устанавливает для text-align свойства CSS родительского элемента значение center для всех .center изображений, которые, я думаю, будут выполнены без установки ширины:

$('img.center').parent().css('text-align','center');​​​​​​​​​​​​​​​

• ДЕМО

Answer 8

Чтобы сделать то, что вы просите, вам нужно только сделать это:

$("img.center").load(function(){
   var currentImage = $(this);
   currentImage.css("width",currentImage.width()+"px");
});