Utilizzando jQuery Proprietà CSS per centrare un’Immagine

Qui è un pezzo di codice normale dal mio sito per foto centrata:

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

Sto usando gli stili in linea con una classe di centro (il css per il centro è margin:0 auto;) al centro delle mie immagini in una pagina. Non è possibile impostare una larghezza standard per le immagini con il centro della classe, perché le immagini variano in larghezza.

So jQuery è una proprietà CSS e che mi ha fatto pensare che se posso usare jQuery per leggere la larghezza dell’immagine dalla proprietà dell’immagine e inserire automaticamente width: *image-size pulled from img properties*px;a qualsiasi immagine che ha una classe di centro, eliminando la necessità per me di impostare manualmente la larghezza dell’immagine per ogni immagine.

Si prega di fornire esempi di come io non sono fluente in JS abbastanza per scrivere io.

InformationsquelleAutor L84 | 2012-02-14



8 Replies
  1. 4

    Cosa, dare le vostre immagini in un contenitore con text-align : center:

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

    Ecco una demo: http://jsfiddle.net/YfFht/

    Un CSS soluzione sarà un bene per le prestazioni.

    • +1 perché dare a un medico un idraulico di lavoro?
    • Ho tentato e che l’immagine è stata enorme! L’immagine è stata 350px e rendering a 950px. Idee? Pensieri?
    • Nevermind – C’è stato qualche conflitto codice che ho perso. Funziona. Grazie. Ora la Domanda – Perché fa questo lavoro per le immagini (text-align: center quando è nel formato di cui sopra, quando se lo metti all’interno del <img> tag non?
    • È possibile impostare un max-width proprietà CSS per le immagini, in modo tale da crescere a una dimensione specifica. developer.mozilla.org/en/CSS/text-align. Vedere la Sommario in questo link: text-align does not control the alignment of block elements itself, only their inline content.. Ecco come text-align opere.
  2. 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;
    }
  3. 1

    L’uso di carico per rilevare quando l’immagine viene scaricata. In funzione anonima per ognuno la larghezza e si applica come una proprietà css.

    $('img').load( function() {
       $(this).css('width', $(this).width());
    });
    • Assicurarsi che si associa alle immagini prima di qualsiasi di loro hanno caricato. O, in alternativa, eseguire il codice quando window.load incendi, così sai che tutte le immagini sono disponibili per ottenere le loro dimensioni.
    • Come Jasper menziona, è possibile utilizzare la finestra.caricare e poi si legano con $('img').each( function... invece. Se hai inserito il codice in un window.load il codice non avrebbe mai il fuoco perché le risorse sono già caricati.
  4. 1

    Rimuovere stili inline dal img elementi, e poi di provare questo codice nella finestra di carico evento che permetterà di garantire che tutte le risorse che la pagina viene caricata.

    $(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
            });
        });
    
    });
  5. 0

    A fare quello che stai chiedendo è solo bisogno di fare questo:

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

    Questo jQuery frammento di imposta della capogruppo text-align proprietà CSS center per tutti .center immagini, che credo porterà a compimento la stessa senza di impostazione larghezze:

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

    Si sarebbe guardare a $("img").width() questo vi darà la larghezza in pixel utilizzando il formato intero (quindi, se la larghezza è “width: 100px;“, questo sarebbe “100”). Ma in ordine per questo lavoro, ogni immagine deve avere width="" set di attributi, altrimenti si avrà un errore e nessun valore di ritorno.

    Due link per controllare fuori sarebbe:

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

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

Lascia un commento