Comment puis-je redimensionner une image à l'aide de HTML / CSS uniquement (I.e Aucun code de serveur) tout en conservant ses proportions et avoir un effet de culture. Détails: Je souhaite la redimensionner à une largeur spécifiée, conserver les proportions et si la hauteur est plus grande qu'une valeur spécifiée pour le cultiver à la hauteur spécifiée?
En fait, je sais comment faire cela en utilisant du code serveur, mais je ne veux pas faire cela. Cela impliquerait d'utiliser une référence de fichier différente et de référer l'image quelque chose comme Qu'est-ce que "Bonteurs" est que je dois envoyer l'en-tête d'image afin que rien d'autre sur la page ne soit affiché.
Y a-t-il un moyen de faire quelque chose comme ça? Peut-être de pure html / css? : P
J'ai fait une fonction qui fait quelque chose comme ça (sauf que "Crop") et renvoie juste merci 
width = "" hauteur = "" et je l'utilise comme ce 
, mais je ne comprends pas comment puis-je faire cette culture ...
5 Réponses :
Vous ne pouvez pas rendre une image et une image HTML dans le même fichier, car les navigateurs dépendent de son en-tête Type de contenu pour l'interpréter.
Le Vous devrez relier votre balise Type de contenu L'en-tête d'un document HTML est généralement défini sur TEXT / HTML ATTENDU QUE le type de contenu d'une image est image / * (substitut * pour format image). Vous pouvez imprimer des données d'image sur un document HTML, mais puisque le navigateur est chargé de l'interpréter comme text / html plutôt qu'une image son contenu serait brouillé.
sur un fichier php tel que vous avez décrit. Je ne sais pas pourquoi cela constitue un problème; C'est la bonne façon d'y aller. Vous pouvez bien sûr recadrer l'image en manipulant ses dimensions dans HTML, mais je ne vous recommande pas de faire.
Il n'y a aucun moyen de le faire dans le même dossier?
@kmunky il y a un moyen ... si je vous ai bien compris, vous voulez vous faire connecter des données d'image.
Créer une assistant comme: de sorte que cette aide vérifie si l'image redimensionnée est déjà créée ou créée une nouvelle. et dans les deux cas, il renvoie une URL appropriée à la nouvelle image.
Je pense que ImageMagick prend en charge "Redimensionner pour tenir" et "redimensionner pour remplir" les méthodes, ce dernier étant ce que vous recherchez.
Avant d'écrire votre étiquette IMG sur la mémoire tampon de sortie, enregistrez l'image sur le nom de fichier proposé résultant et laissez-vous «identifier» extraire la largeur et la hauteur de cette image pour vous.
Si vous ne voulez pas travailler avec un fichier séparé mais que vous souhaitez plutôt que les données d'image en ligne, essayez le Méthode de données-Uri quels nouveaux navigateurs Web soutiennent. Cela définit le flux de données binaires de l'image dans le fichier HTML, de sorte qu'il est incorporé.
Vous pouvez utiliser phpthumb , pour redimensionner et recadrer les images à la volée. Il utilise la bibliothèque GD pour créer des vignettes à partir d'images JPEG, PNG, GIF, etc.
OK, j'ai donc réussi à trouver un moyen de le faire à partir de HTML / CSS. Toute l'idée était de se débarrasser de cette "extraheight": d'abord mon image est redimensionnée à la largeur souhaitée (en conservant les proportions), puis en donnant une hauteur fixe à contenant div et Réglage Overflow to caché permet au script pour afficher uniquement la partie souhaitée de l'image.
Pour ce que ça vaut la peine, j'ai pu abandonner l'attribut de style du parent div. Il suffit d'utiliser la largeur = "200px" et la hauteur = "auto" sur la balise IMG et envelopper qu'avec un divisé pour moi.