resize.html 1.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142
  1. <section id="resizer-options">
  2. <h1>Options</h1>
  3. <p>Use the options below to adjust resizer behavior.</p>
  4. <h2>Resizing strategy</h2>
  5. <p>
  6. <select name="strategy" id="strategy">
  7. <option value="center">Center</option>
  8. <option value="top-anchored" selected>Top-anchored center</option>
  9. <option value="side">Side</option>
  10. </select>
  11. </p>
  12. <h2>Visible resizers</h2>
  13. <ol>
  14. <li><input type="checkbox" name="handler[]" value="top-left" id="resizer-checkbox__top-left"> <label for="resizer-checkbox__top-left">top-left</label></li>
  15. <li><input type="checkbox" name="handler[]" value="top-right" id="resizer-checkbox__top-right"> <label for="resizer-checkbox__top-right">top-right</label></li>
  16. <li><input type="checkbox" name="handler[]" value="bottom-right" id="resizer-checkbox__bottom-right"> <label for="resizer-checkbox__bottom-right">bottom-right</label></li>
  17. <li><input type="checkbox" name="handler[]" value="bottom-left" id="resizer-checkbox__bottom-left"> <label for="resizer-checkbox__bottom-left">bottom-left</label></li>
  18. </ol>
  19. <p><input type="checkbox" name="resize-image" value="true" id="resize-image" checked> <label for="resize-image">Resize using image directly</label></p>
  20. </section>
  21. <div id="editor">
  22. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla finibus consequat placerat. Vestibulum id tellus
  23. et mauris sagittis tincidunt quis id mauris. Curabitur consectetur lectus sit amet tellus mattis, non lobortis
  24. leo interdum. </p>
  25. <figure class="image image-style-side">
  26. <img src="sample.jpg" alt="" height="60" />
  27. </figure>
  28. <figure class="image">
  29. <img src="sample.jpg" alt="" />
  30. </figure>
  31. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla finibus consequat placerat. Vestibulum id tellus
  32. et mauris sagittis tincidunt quis id mauris. Curabitur consectetur lectus sit amet tellus mattis, non lobortis
  33. leo interdum. </p>
  34. </div>