Come ridimensionare un'immagine in puro HTML/CSS mantenendo le sue proporzioni?

Question

Come posso ridimensionare un'immagine usando solo HTML/CSS (cioè nessun codice server) mantenendo le sue proporzioni e un effetto di ritaglio. Dettagli: desidero ridimensionarlo a una larghezza specificata, mantenere le proporzioni e se l'altezza è maggiore di un valore specificato per ritagliarla all'altezza specificata?

In realtà, so come farlo utilizzando un codice server ma non voglio farlo. Significherebbe utilizzare un diverso riferimento al file e fare riferimento all'immagine come <img src="picture.php" />. Ho bisogno di elaborare l'immagine nella stessa pagina che lo visualizza.

Quello che "mi dà fastidio" è che devo inviare l'intestazione dell'immagine in modo che non venga visualizzato nient'altro sulla pagina.

C'è un modo per fare qualcosa del genere? Forse da puro HTML/CSS? : P

Ho fatto una funzione che fa qualcosa del genere (eccetto quella cosa "crop") e restituisce solo width="" height="" e lo uso come questo <img src="image.jpg" resize("image.jpg") />, ma non capisco come posso fare quel ritaglio .. .

Grazie

Answer 1

ok, quindi sono riuscito a trovare un modo per farlo da html/css.L'idea era quella di sbarazzarsi di quel "extraheight":

<div style="width:200px;height:200px;overflow:hidden;" > 
    <img src="image.jpg" width="200px" height="auto"> 
</div> 

prima la mia immagine viene ridimensionata alla larghezza desiderata (mantenendo le proporzioni) e poi dando un altezza fissa a contenere div e setting overflow to hidden rende lo script per visualizzare solo la parte desiderata dell'immagine.

Answer 2

non si può rendere un'immagine e HTML nello stesso file, perché i browser dipendono dalla sua content-type intestazione di interpretarlo.

L'intestazione content-type di un documento HTML è generalmente impostata su text/html mentre il tipo di contenuto di un'immagine è image/* (sostituto * per il formato immagine). È possibile stampare i dati delle immagini su un documento HTML, ma poiché il browser viene istruito per interpretarlo come text/html anziché un'immagine, il suo contenuto sarebbe confuso.

È necessario collegare il tag <img> a un file PHP come descritto. Non sono sicuro del perché questo costituisca un problema; è il modo giusto per farlo. Ovviamente potresti ritagliare l'immagine manipolandone le dimensioni in HTML, ma non ti consiglio di farlo.

Answer 3

creare aiutante come:

<?php 
echo '<img src="' . image_resize($path_to_image, SIZE_X, SIZE_Y) . '" />'; 
?> 

quindi questo aiuto sarà controllare se un'immagine ridimensionata già creato o crearne uno nuovo. e in entrambi i casi restituisce l'url corretto alla nuova immagine.

Answer 4

Penso ImageMagick supporta "ridimensionare per adattarsi" e "ridimensionare per riempire" i metodi, quest'ultimo è quello che stai cercando.

Prima di scrivere il tag img al buffer di output, salvare l'immagine al nome del file proposto risultante e lasciare 'identificare' estrarre la larghezza e l'altezza di questa immagine per voi.

Se non si desidera lavorare con un file separato ma si desidera che i dati dell'immagine siano incorporati, provare lo data-uri method supportati dai nuovi browser Web. Questo inline il flusso di dati binari dell'immagine all'interno del file html, quindi è incorporato.

Answer 5

È possibile utilizzare phpThumb, per ridimensionare e ritagliare le immagini al volo. Utilizza la libreria GD per creare miniature da immagini JPEG, PNG, GIF, ecc.