div растягивает картинку внутри img

175
21 сентября 2018, 23:30

Есть div, который имеет ширину 400px, и в нем есть тег img. Когда я загружаю квадратную картинку, он ее растягивает, а мне нужно, чтобы она было не растянута

Как можно поправить?

Answer 1

Как прямоугольную картинку обратить в квадратную, немного ужав ее измерения, с помощью 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.stack.imgur.com/I6coC.jpg"> 
</div>

Как можно увидеть из сниппета, ничто и нигде не растягивается, пусть ширина div и превосходит таковое же измерение img