0

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

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

2
  • 2
    Постарайтесь писать более развёрнутые вопросы. Для получения ответа поясните, в чём именно вы видите проблему, что вы хотите получить в результате и т. д.
    – Kromster
    Commented 23 июл. 2018 в 12:01
  • есть div который имеет ширину 400px и в нем есть тег img, когда я загружают квадратную картинку он его растягивает а мне нужно чтобы оно было НЕ розтягунта
    – no nn
    Commented 23 июл. 2018 в 12:19

1 ответ 1

0

Как прямоугольную картинку обратить в квадратную, немного ужав ее измерения, с помощью 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

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.