Ridimensiona un'immagine in base alla dimensione del DIV con cui è in CSS?

Di seguito un'immagine di un blog su cui sto lavorando. Ho comunque bisogno di aiuto con alcuni CSS. Nell'immagine in alto puoi vedere cosa succede al mio avatar quando il corpo del testo a destra di esso è più grande dell'immagine.Ridimensiona un'immagine in base alla dimensione del DIV con cui è in CSS?

L'immagine in basso è come voglio che guardi.

Il mio problema è che ci sono più autori, quindi il testo del corpo a destra può avere lunghezze diverse a seconda dell'autore. Mi piacerebbe in qualche modo avere l'immagine ridimensionata per essere sempre inserita nel div e apparire come nell'immagine in basso.

Speriamo che tutto aveva un senso, se qualcuno sa come fare questo Gradirei qualsiasi aiuto

Ho anche messo un po 'di codice di esempio fino qui per vederla dal vivo http://dabblet.com/gist/2050005

enter image description here

fonte

2012-03-17 JasonDavis

vigore le immagine a una dimensione specifica, indipendentemente dalle dimensioni dell'originale.

css:

.size-image img { 
width: 200px; 
height: 200px; 
}

Size essere qualsiasi dimensione avete bisogno/desidera riempire. Nel codice HTML basta aggiungere la classe all'elemento img.

<img src="path/to/image" class="size-image" />

Poi qualsiasi immagine messo in quell'elemento, sia per jQuery, PHP o qualsiasi altra cosa, l'elemento è dimensionato per specificamente che cosa avete bisogno/desidera.

È inoltre possibile inserire l'immagine nel proprio contenitore, ad esempio "contenitore sinistro" e avere la larghezza del contenitore sinistro di una larghezza specifica con un'altezza automatica, solo inserire il tag <img> nel contenitore sinistro e il testo in il "diritto-contenitore"

Spero che questo aiuti

fonte

2012-03-17 01:07:20

grazie per il vostro aiuto, il mio problema adesso è se dovessi impostare a 200px, io non sono sicuro quanto tempo ci le informazioni biologiche stanno per essere, quindi se fosse più lungo potrebbe allungarsi ancora più grande, o potrebbe essere molto più piccolo. Forse se impostassi 'max-width' e' max-height' risolverei questo problema – JasonDavis

Quindi prova l'idea del contenitore left/right. crea un 'div' padre quindi un' div' come contenitore sinistro, che conterrà il 'img' e il contenitore destro che ospiterà il testo. Anche se la dimensione del testo è maggiore della dimensione dell'immagine, rimarrà sempre nel suo contenitore.Assicurati di far fluttuare il container a sinistra per spostarlo a sinistra, quindi nel successivo 'div' OUTSIDE dei contenitori' div' assicurati di cancellare quel float –

Pensandoci, per cambiare "dinamicamente" la dimensione dell'immagine, puoi fare larghezza: 100% e altezza: 100% ma il problema è che, se la larghezza dell'elemento immagine o contiene il div, si ferma dal crescere (a causa del testo a destra) l'altezza dell'immagine resterà vincolata a larghezza . Dovresti concentrarti sui contenitori piuttosto che ridimensionare un'immagine. Inoltre si perde la qualità dell'immagine quando si allungano le immagini –

Perché non puoi semplicemente fare:

<!doctype html> 
<html> 
    <head> 
     <style type="text/css"> 
      #img-div { width: 250px; } 
      #img-div img { width: 100%; } 
      #text-div { } 
     </style> 
    </head> 
    <body> 
     <div id="img-div"> 
      <img src="example.jpg" /> 
     </div> 
     <div id="text-div"> 
      Lorem ipsum dolor blah blah blah 
     </div> 
    </body> 
</html>

che funziona per me. L'unico problema è quando l'immagine reale è più piccola della larghezza del div contenente, quindi viene pixelata.

fonte

2012-03-17 01:40:39 Tim

questo lavoro per voi ..

utilizzare i CSS per impostare

img { max-width: 100%; max-height: 100% }

fonte

2013-02-03 05:24:57 Swarup

Sto usando questo:

.product p.image { 
text-align: center; 
width: 220px; 
height: 160px; 
overflow: hidden; 
} 
.product p.image img{ 
max-width: 100%; 
max-height: 100%; 
}

fonte

2017-09-03 13:51:52 Flavio

Ridimensiona un'immagine in base alla dimensione del DIV con cui è in CSS?

risposta

Problemi correlati