Comment redimensionner une image en pur HTML/CSS tout en gardant ses proportions?

Comment redimensionner une image à l'aide de HTML/CSS (j'.e pas de code serveur) tout en gardant ses proportions et une culture de l'effet.
Détails: je souhaite redimensionner pour une largeur spécifiée, garder les proportions et si la hauteur est plus grande qu'une valeur spécifiée de recadrer à la hauteur spécifiée ?

En fait, je sais comment le faire à l'aide d'un serveur de code, mais je ne veux pas faire ça. Elle impliquerait en utilisant un autre fichier de référence et reportez-vous à la photo quelque chose comme <img src="picture.php" />. J'ai besoin de traiter l'image dans la même page qui s'affiche.

Ce qui "dérange" moi, c'est que je dois envoyer l'en-tête d'image donc rien d'autre sur la page sera affichée.

Est-il un moyen de faire quelque chose comme ça? Peut-être du pur HTML/CSS? 😛

J'ai fait une fonction qui fait quelque chose comme ça (sauf que la "récolte" de la chose) et il renvoie juste width="" height="" et je l'utilise comme ceci <img src="image.jpg" resize("image.jpg") />, mais je ne comprends pas comment je peux faire que des cultures...

Grâce

OriginalL'auteur kmunky | 2010-02-09

  1. 13

    ok, donc j'ai réussi à trouver un moyen de le faire en html/css. L'idée était de se débarrasser de cette "extraheight" :

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

    d'abord mon image est redimensionnée à la largeur désirée(en gardant les proportions), puis en donnant une hauteur fixe à la div contenant et setting overflow to hidden fait le script pour afficher uniquement la partie souhaitée de l'image.

    Pour ce que ça vaut, j'ai été en mesure de déposer l'attribut style de la div parent. Juste en utilisant width="200px" et height="auto" dans la balise img et l'emballage que par une div qui a fonctionné pour moi.

    OriginalL'auteur kmunky

  2. 1

    Vous ne pouvez pas le rendu d'une image et HTML dans le même fichier, car les navigateurs dépendent de son content-type en-tête de l'interpréter.

    La content-type en-tête d'un document HTML est généralement définie à text/html alors que le type de contenu d'une image est image/* (remplacer les * pour le format de l'image). Vous pouvez imprimer des données d'image à un document HTML, mais depuis le navigateur est invité à interpréter comme text/html plutôt qu'une image de son contenu devrait être déformés.

    Vous devez lier votre <img> tag d'un fichier PHP comme vous l'avez décrit. Je ne suis pas sûr pourquoi, qui constitue un problème; c'est la bonne façon d'aller à ce sujet. Vous pouvez bien sûr de recadrer l'image en manipulant ses dimensions en HTML, mais je ne vous recommande pas de le faire.

    il n'y a aucun moyen de le faire dans le même fichier?
    Il y a un moyen... Si j'ai bien compris vous avez droit que vous souhaitez image en ligne des données.

    OriginalL'auteur Johannes Gorset

  3. 1

    Je pense que ImageMagick prend en charge "redimensionner pour s'adapter" et "redimensionner à combler" les méthodes, ce dernier étant ce que vous êtes recherche pour.

    Avant d'écrire votre balise img pour le tampon de sortie, enregistrez l'image dans le projet de nom de fichier et de laisser les "identifier" extrait de la largeur et de la hauteur de cette image pour vous.

    Si vous ne voulez pas travailler avec un autre fichier, mais au lieu de l'image de données en ligne, essayez les data-uri méthode qui nouveaux navigateurs web pris en charge. Cette inlines le flux de données binaires de l'image dans le fichier html, donc il est incorporé.

    OriginalL'auteur hurikhan77

  4. 1

    Vous pouvez utiliser phpThumb, de redimensionnement et le rognage les images à la volée. Il utilise la librairie GD pour créer des vignettes à partir d'images JPEG, PNG, GIF, etc.

    OriginalL'auteur Chetan Sharma

  5. 0

    créer de l'aide comme:

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

    donc cette aide permettra de vérifier si l'image redimensionnée déjà créées ou en créer un nouveau. et dans les deux cas, il renvoie une url correcte pour la nouvelle image.

    OriginalL'auteur zerkms