Я пытаюсь интегрировать изменение размера изображения с помощью contentEditable в Chrome. Я знаю, что есть проблемы с webkit о нормальной работе этой функции, поэтому мне было интересно, какой лучший альтернативный метод для интеграции изменения размера изображения, если пользователь использует Google Chrome (jQuery-плагины? Методы Javascript?).
<div contenteditable>
<img src="http://www.thebrandbite.com/wp-content/media/2015/07/apple-7.jpg" width=200 />
</div>Ваши варианты:
Используйте библиотеку. Они определенно существуют: например, YUI имеет модуль изменения размера изображения. Я никогда не использовал его, но демонстрация работает во всех браузерах на рабочем столе, которые я пробовал.
Создайте свой собственный: добавьте элементы перетаскиваемого элемента для ручек изменения размера. Я сделал это раньше, и это не слишком сложно, если вы знаете, что делаете.
@Tim-Down Answer, вероятно, лучшее решение. Но я хочу выбросить туда, что вы можете изменить размер изображений только с помощью CSS, если вы не хотите делать с ним ничего более:
http://codepen.io/anon/pen/JEEKqO
resize: both;
background-size: contain;
background-repeat: no-repeat;
background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/photoshop-face-after.jpg);
body {
background-color: #1D1F1F;
}
section {
display: table;
margin: 0 auto;
}
div {
resize: both;
background-color: white;
overflow: scroll;
background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/photoshop-face-after.jpg');
background-size: cover;
background-repeat: no-repeat;
} <section>
<button>both</button>
<button>horizontal</button>
<button>vertical</button>
<button>none</button>
<div class="resize"></div>
</section>