Générer cadre pour l'image

Question

Je crée une galerie, et je veux créer un cadre autour de l'image.

Mais cette image doit être dimensionnable. Largeur et hauteur de cette image générées par la largeur et la hauteur de l'image.

Et doit avoir la possibilité de changer la hauteur du cadre à travers le JavaScript.

Merci. PS: Tout d'abord, je dois avoir la possibilité de faire une trame étroite à travers le JavaScript.

Answer 1

Cela peut être assez difficile à retirer.

Si vous utilisez des navigateurs modernes qui prennent en charge TOILE, consultez cette démo qui fait ce que vous cherchez: CANVAS Demo

Sinon, vous devrez créer 8 images (4 coins et 4 côtés) où les côtés sont faits de telle sorte qu'ils peuvent être carrelés pour s'adapter à la taille dont vous avez besoin.

L'astuce suivante est comment vous construisez le cadre. Vous pouvez créer à la main DIVs/Tables autour de vos images pour créer cet effet, mais ce serait très volumineux et pas très propre. Votre meilleur pari serait d'utiliser jQuery (ou votre lib préférée) pour accrocher toutes les images sur la page avec une classe CSS (par exemple "fancyFrame"), et enveloppez-les au besoin avec le balisage HTML qui utilise les images que vous avez créées ci-dessus via CSS.

Answer 2

Vous pouvez utiliser A List Apart's Drop Shadow technique qui utilise CSS et PNG pour créer des ombres portées automatiquement redimensionnables pour les images. Vous pouvez modifier la technique pour créer un cadre redimensionnable.

Vous auriez besoin de quatre div et quatre images. Les coins doivent être coupés à des angles de 45 degrés avec transparence:

• Image 1 - Coin supérieur gauche et côtés supérieur et gauche du cadre.
• Image 2 - Coin supérieur droit et côté droit du cadre.
• Image 3 - coin inférieur gauche et en bas du cadre
• Image 4 - coin inférieur droit du cadre

Answer 3

Rétrécissement le cadre avec Javascript est le plus facile, vraiment. Une fois que vous avez votre code HTML/CSS mis en place afin qu'il adapte déjà, vous pouvez simplement définir la largeur avec JavaScript comme ceci:

var photo = document.getElementById('photoFrame'); 
photo.width = '200px'; 

Answer 4

Si je vous je fais que je peux réutiliser les images (répétition), et alors je le ferai comme ça:

<div id="frame"> 
    <div id="top-left"></div> 
    <div id="top"></div> 
    <div id="top-right"></div> 

    <div id="left"></div> 
    <div id="imageSpace"></div> 
    <div id="right"></div> 

    <div id="bottom-left"></div> 
    <div id="bottom"></div> 
    <div id="bottom-right"></div> 
</div> 

où: #top-left, #top-right, #bottom-left, #bottom-right utilisent des images d'angle comme arrière-plans et ont tous les deux ensemble width et height.

Et #top, #right, #bottom, #left utilisent une image répétée pour leurs arrière-plans.

Cochez l'image ci-jointe où je place des lignes où vous devriez couper l'image d'origine.

Cette méthode vous permettra de changer la largeur de #top/#bottom et #left/#right pour augmenter la taille de votre cadre.

Answer 5

drôle, je devais faire cette chose exacte quand je travaillais à ImageKind.com. Pour référence, si vous allez à la boutique d'image là, comme this one, allez à l'étape 4 (Ajouter des tapis) et cliquez sur Ajuster la largeur, il y a un curseur qui fait plus ou moins ce que vous décrivez. À l'origine, j'avais deux DIVs imbriquées avec de grandes pièces de cadre en forme de L opposées comme images de fond. Une petite inspection de Firebug montre qu'ils ont changé pour être une table. Plus efficace j'en suis sûr, car les pièces latérales peuvent carreler.