5
votes

Comment redimensionner l'image dans une page Web avec la souris

Je souhaite déplacer et redimensionner l'image sur le Web avec la souris.
J'ai donc essayé cela avec Jquery.
Draggable of Jquery fonctionne bien, mais redimensionnable ne fonctionne pas.
Quel est le problème dans mon code?
Et pourriez-vous recommander d'autres méthodes à l'exception de jquery?

<script>   
$( function() {
    $( "#yoman" ).draggable();
});

$( function() {
    $( "#yoman" ).resizable();
});
</script>

</head> 

<body>
    <div id="yoman" class="ui-widget-content">
        <img src = "https://www.froala.com/assets/blog/pages/post41_2.png" width="100px" height="100px">
    </div>
</body>

javascript jquery html css

1 commentaires

Le problème est que vous redimensionnez le conteneur et cela n'affecte pas l'image. Vous devez faire en sorte que l'image rentre dans le conteneur avec width: 100% . Si vous souhaitez autoriser le changement de rapport, donnez-lui hauteur: 100% . Sinon, donnez-lui height: auto .

3 Réponses :

5
votes

C'est une solution simple. Il y en a beaucoup d'autres. Avec cette approche, vous pouvez redimensionner l'image en tirant sur le coin inférieur droit de l'image.

<div class='resizable'>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/bb/Pigeon_Point_Lighthouse_%282016%29.jpg/220px-Pigeon_Point_Lighthouse_%282016%29.jpg" alt="">  
</div>

.resizable {
  display: inline-block;
  background: red;
  resize: both;
  overflow: hidden;
  line-height: 0;
  }

.resizable img {
  width: 100%;
  height: 100%;
}

1 commentaires

Je vous remercie ! Ça marche bien. Mais je veux utiliser le glisser-redimensionner ensemble. Si j'ajoute jquery drag dans votre code, l'image est déplacée. Pourriez-vous m'apprendre comment utiliser les deux choses en même temps?

1
votes

Essayez d'inclure ce fichier CSS sur votre site:

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

jQuery .resizable () nécessite le style du CSS de jQueryUI pour fonctionner.

0 commentaires

0
votes

Voir jqueryui.com - redimensionnable

pour voir votre photo, ajoutez ce CSS CSS au:

#yoman { width: 100%; height: 100%; padding: 1.4324352342342423em; margin: 1px;}

Liens: Diary.com - redimensionner une image avec HTML et JS

Stackoverflow - HTML5 pré-redimensionner les images avant téléchargement

Stackoverflow - Konva.Js recadre et redimensionne

0 commentaires