Есть div
, который имеет ширину 400px, и в нем есть тег img
. Когда я загружаю квадратную картинку, он ее растягивает, а мне нужно, чтобы она было не растянута
Как можно поправить?
Есть div
, который имеет ширину 400px, и в нем есть тег img
. Когда я загружаю квадратную картинку, он ее растягивает, а мне нужно, чтобы она было не растянута
Как можно поправить?
Как прямоугольную картинку обратить в квадратную, немного ужав ее измерения, с помощью Javascript
? Приведу простой пример:
$(document).ready(function() {
$("input").on("change", e => { // Вешаем обработчик на input
var reader = new FileReader();
reader.onload = function(event) {
var img = new Image();
img.onload = function() {
var side = Math.min(img.height, img.width); // Выбираем меньшую сторону изображения
$("canvas").width(side).height(side); // Устанавливаем размер canvas равным стороне изображения
$("canvas")[0].getContext("2d").drawImage(img, 0, 0); // Отрисовываем ужатую картинку
// $("canvas")[0].getContext("2d").drawImage(img, 0, 0, side, side, 0, 0, side, side); // Отрисовываем обрезанную картинку
}
img.src = event.target.result;
}
reader.readAsDataURL(e.target.files[0]); // Читаем выбранные данные
});
});
canvas, input {
display: block;
margin-bottom: 20px;
}
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<canvas></canvas>
<input type="file" >
UPD:
После обновления Вашего вопроса смысл изменился, мягко говоря, кардинально.
Для того, чтобы изображения не растягивалось, Вам достаточно указать у тега img
его размеры, использовать js
тут бессмысленно! Пример с использованием данной картинки (400х400):
div {
width: 800px;
background-color: red;
}
img {
width: 400px;
height: 400px;
}
<div>
<img src="https://i.sstatic.net/I6coC.jpg">
</div>
Как можно увидеть из сниппета, ничто и нигде не растягивается, пусть ширина div
и превосходит таковое же измерение img