18041 sujets

Questions générales et questions de débutants

[Résolu] Étendre une image dans une div selon le contenu de celle-ci.

Bonjour, bonsoir à tous et à toutes,

Voici mon problème :

http://i.imgur.com/MwCbdAX.png

J'ai essayé le code suivant entre la <div> et <Article> :

<img style="background: url('http://unity-soft.org/styles/default/xenforo/clear.png') no-repeat; display: block; max-width: 100%; height: auto; position: absolute;" src="http://unity-soft.org/styles/default/xenforo/clear.png">


L'image fait 1 px, j'ai également essayé de mettre du code css directement dans mon template pour définir les propriétés de la div mais ça ne fonctionne pas non plus, j'ai essayé de mettre une classe dans la div également, rien à faire, ça ne veut pas. En faite l'image prend des proportions mais ne prend évidemment pas en compte le fait que l'utilisateur puisse écrire énormément de contenu, inclure des images, vidéos, ou tout simplement écrire peu de chose.

Du coup soit l'image dépasse du cadre de la div soit elle ne dépasse pas et bien entendu si ça dépasse du cadre ça se répercute sur le pageWidth de mon forum qui lui est le conteneur de ma page.

Je veux qu'elle soit dans la div et que même si la div fasse 20px de haut ou 2000px alors l'image reste bien dans la div sans-y sortir, évidemment je veux également qu'elle prenne le même contenu que la div elle-même donc si la div fait 200px, l'image doit faire 200px, il en va de même si la div fait 5321px l'image doit faire 5321px.

Auriez-vous des idées? Est-ce facile à comprendre?

Merci de vos prochaines réponses et bonne soirée.

Hackode.
Il y a un probleme avec ?
div {
background:url(http://unity-soft.org/styles/default/xenforo/clear.png);
}

si c'est pour la passer au dessus, pseudo-element + z-index , ou 
div {
pointer-events : none;
}


Si ta bidouille sert a empecher la copie, c'est perdu d'avance sitôt que tu publie.
Modifié par gc-nomade (25 Mar 2014 - 19:13)
Merci de ta réponse, c'est comme je l'appelle, une barrière "anti noob" beaucoup ne pensent pas à utiliser l'outil de développement intégré aux navigateurs du coup au lieu d'utiliser script je préfère utiliser ce genre de méthode.

Je vais essayé et te retiens au courant.

Si en attendant d'autres ont des réponses, elles sont les bienvenues.
Ce n'est pas exactement ce que je veux, ça répond en partie à mon problème car l'on ne peut pas déplacer les images, cliquer les liens, les vidéos etc ... Mais l'on peut toujours interagir avec le texte, ce que je ne souhaite pas par dessus tout.
Hackode a écrit :
. Mais l'on peut toujours interagir avec le texte, ce que je ne souhaite pas par dessus tout.

étonnant pour un forum , non ?
L'on peut écrire, mais pas le sélectionner. Mais au pire j'ai fais ça en JavaScript c'est mieux encore.
Modérateur
<article>
  <img class="stupid-blocker" src="truc.png" alt="" aria-hidden="true">
  <h1> Something</h1>
  <p>Blah blah</p>
</article>


article {
  position: relative;
}
.stupid-blocker {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}


Bien sûr un sélectionner tout, voir le code source, désactivation de l'image par outils de développeurs ou adblock permettra d'y accéder. Juste un truc pour embêter Mme Michu quoi.
P.S. : J'avais oublié de préciser mais mon image fait 1px sur 1px, j'ai alors rajouté width: 100% & height: 100% et ça fonctionne parfaitement.

J'ai tout de même découvert plusieurs solutions, dont un script très pratique que je vous partage :

<script type="text/javascript">
        //<!--
                function ffalse()
                {
                        return false;
                }
                function ftrue()
                {
                        return true;
                }
                document.onselectstart = new Function ("return false");
                if(window.sidebar)
                {
                        document.onmousedown = ffalse;
                        document.onclick = ftrue;
                }
        //-->
        </script>


J'ai également constaté que l'on avait le choix via :

oncontextmenu="return true" ondragstart="return false" onselectstart="return false"


Ce code peut s'intégrer sur plusieurs éléments, par contre il n'est pas pris en compte par tous les navigateurs.

Et enfin ta méthode kustolovic, ce qui donne :


     article {
  position: relative;
  }
    .stupid-blocker {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  }




<article>
<img class="stupid-blocker" src="http://unity-soft.org/styles/default/xenforo/clear.png" width="100%" height="100%" alt="" aria-hidden="true">
</article>
Sujet clos
Aller à