Ridimensionamento proporzionale delle immagini in CSS con larghezza massima

Question

In questo momento, sto usando la larghezza massima per ridimensionare le immagini per adattarle. Tuttavia, non si ridimensionano proporzionalmente. C'è un modo per farlo accadere? Sono aperto a Javascript/jQuery.

Se possibile, c'è un modo per farlo senza conoscere le dimensioni originali dell'immagine (forse determinarlo usando Javascript/jQuery)?

Answer 1

è necessario specificare la larghezza e l'altezza originale:

<img src="/whatever" width="100" height="200" alt="Whatever" /> 

E poi usare qualcosa di simile nel CSS:

#content img { max-width: 100%; height: auto } 

Si potrebbe provare questo con jQuery, se non si dispone di la larghezza e l'altezza in attacco, ma la vostra situazione potrebbe essere diversa:

$(function(){ 
    $('#content img').load(function(){ 
     var $img = $(this); 
     $img.attr('width', $img.width()).attr('height', $img.height()); 
    }); 
}); 

Ovviamente sostituire #content con qualsiasi selettore a cui si desidera applicare la funzionalità.

Answer 2

la messa in uso larghezza costante:

height: auto 

Answer 3

function resizeBackground() { 
    var scale=0; 
    var stageWidth=$(window).width(); 
    var newWidth=$("#myPic").width(); 
    var stageHeight=$(window).height(); 
    var newHeight=$("#myPic").height(); 
    if($(window).width() > $(window).height()) { 
     scale = stageHeight/newHeight; 
     scale = stageWidth/newWidth; 
    } else { 
     scale = stageWidth/newWidth; 
     scale = stageHeight/newHeight; 
    } 
    newWidth = newWidth*scale; 
    newHeight = newHeight*scale 
    $("#myPic").width(newWidth); 
    $("#myPic").height(newHeight); 
} 

Answer 4

Uso larghezza e max-width sull'immagine rovinare IE8.

Metti la larghezza sull'immagine e avvolgila in un div che ha la larghezza massima. (Quindi maledire MS.)

Answer 5

Contrariamente alla risposta accettata, è possibile farlo senza specificare la dimensione nel codice HTML. Tutto può essere fatto in CSS:

#content img { 
    max-width: 100px; 
    width: 100%; 
    height: auto; 
} 

Answer 6

Ecco come farlo senza Javascript. Imposta il tuo max-width sulla lunghezza desiderata.

#content img { 
    max-width: 620px; 
    height: auto; 
} 

questo ha funzionato per me testato su un Mac con Firefox 28, Chrome 34 e Safari 7 quando ho avuto nessuna impostazione di larghezza o altezza esplicitamente impostati nei img tag.

Non impostare la larghezza in CSS al 100% dopo l'impostazione max-width come suggerito da una persona, poiché tutte le immagini che sono più strette della larghezza del contenitore (come le icone) verranno ingrandite molto più grande del desiderato.

Answer 7

ho dovuto fare questo con i seguenti requisiti:

1. Pagina non deve ottenere reflown quando le immagini di carico. Le dimensioni dell'immagine sono conosciute sul lato server e si possono eseguire calcoli.
2. immagini devono scalare proporzionalmente
3. Le immagini non devono essere più ampio del elemento che contiene
4. Le immagini non devono essere rettificati, solo verso il basso quando necessario,
5. necessario utilizzare un elemento img e non un fondo per assicurarsi che le immagini anche stampare correttamente
6. No JavaScript!

Il più vicino che ho trovato è questo terribile aggeggio. Richiede tre elementi e due stili in linea, ma per quanto ne so questo è il modo migliore per ridimensionare le immagini in modo proporzionale. Tutti i suggerimenti height: auto; qui annullano il punto di specificare le dimensioni dell'immagine sul lato server e fanno saltare il contenuto durante il caricamento.

.image { 
    position: relative; 
} 

.image img { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
} 

<!-- container element with max-width prevents upscaling --> 
<div class="image" style="max-width: 640px;"> 
    <!-- div with padding equal to the image aspect ratio to make 
     the element the correct height --> 
    <div style="padding-top: 75%;"></div> 
    <!-- img scaled to completely fill container --> 
    <img src="//placebear.com/640/480" /> 
</div> 

https://jsfiddle.net/Lqg1fgry/6/ - Il "Ciao" è lì in modo da poter vedere se il contenuto dopo che l'immagine salta intorno.

Answer 8

speriamo che non sia troppo tardi, ma con questo pease di codice sono riuscito ad ottenere immagini proporzionali nella mia galleria. ci vorrà del tempo per capire cosa sta succedendo, ma provalo e divertiti.

<style> 
div_base { 
    width: 200px; // whatever size you want as constrain unchangeable 
    max-width: 95%; // this is connected to img and mus exist 
} 
div_base img { 
    width: auto !important; // very important part just have it there! 
    height: 95%; // and this one is linked to maxW above. 
} 
</style>