Как сохранить пропорции уменьшенных изображений?

Question

Я создаю веб-сайт и столкнулся с этой проблемой: у меня есть изображение с размером 345x300.

В моем div она получает ширину 82 x 118, оставаясь такой:

Мне нужно, чтобы изображение имело ширину 82 x 82, и когда я его установил, оно становится плоским.

Что я могу сделать, чтобы решить эту проблему?Извините за мой плохой английский.

Если нужно, это сайт, на котором я работаю: https://2018.escambofotografico.com.br/ (проблема, о которой я говорю, в конце страницы)

Спасибо всем!

Answer 1

Чтобы не растягивать изображения в контейнере фиксированного размера, вы можете установить значения max-height и max-width на теге изображения равными 100%.Как только высота или ширина заполнит контейнер, изображение не будет растягиваться.

Итак, если вы хотите, чтобы ваше изображение находилось в контейнере размером 82x82 пикселей, вы можете сделать это для каждого изображения:

<div class="thumbnail">
  <img src="...">
</div>

со следующим CSS:

.thumbnail {
  height: 82px;
  width: 82px;
}

.thumbnail > img {
  max-height: 100%;
  max-width: 100%;
}

Answer 2

Вы также можете сделать это, используя свойство css для объекта.Я сделал для вас небольшой пример того, как это работает.

$(function(){
  $('.list-group button').click(function(e) {
      e.preventDefault()

      $that = $(this);
      $that.parent().find('button').removeClass('active');
      $that.addClass('active');
      $("img").removeClass();
      $("img").addClass($that.prop('id'));
  });
})

img {
  height: 182px;
  width: 182px;
}
.fill {
  object-fit: fill;
}
.contain {
  object-fit: contain;
}
.cover {
  object-fit: cover;
}
.none {
  object-fit: none;
}
.scale-down {
  object-fit: scale-down;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid">
  <div class="row">
    <div class="col-6">
      <div class="list-group">
        <button type="button" class="list-group-item list-group-item-action" id="fill">object-fit: fill;</button>
        <button type="button" class="list-group-item list-group-item-action" id="cover">object-fit: cover;</button>
        <button type="button" class="list-group-item list-group-item-action" id="contain">object-fit: contain;</button>
        <button type="button" class="list-group-item list-group-item-action" id="none">object-fit: none;</button>
        <button type="button" class="list-group-item list-group-item-action" id="scale-down">object-fit: scale-down;</button>
      </div>
    </div>
    <div class="col-6">
      <img src="http://coveractionspremium.com/images/SoftwareBoxCD-model6v2-coveractions1.jpg" alt="">
    </div>
  </div>
</div>

Вот кодекс, с которым вы можете поиграть: https://codepen.io/gurgen/pen/jKmXXW

Answer 3

Когда вы устанавливаете размеры тега HTML изображения, это те размеры, которые будут отображаться.Если вы возьмете прямоугольное изображение и отобразите его в виде квадрата, вы получите некоторые искажения.Решение состоит в том, чтобы либо отредактировать ваши изображения с некоторыми отступами, чтобы сделать их точным размером (и формой), которые вы хотите, либо отобразить их с тем же соотношением сторон, что и у изображений.

Кроме того, обратите внимание, что вашиизображение намного больше, чем вы отображаете.Если вас интересует пропускная способность для вашего сервера или клиентов, вам лучше изменить размер изображения до размера, который вы хотите отобразить.Размер изображения в Lightroom составляет около 42 КБ, но вы можете изменить его размер до 82x82 и вместо этого отправить файл размером ~ 6 КБ.Для мобильных пользователей или клиентов с низкой пропускной способностью эта экономия, умноженная на 12 изображений, составляет 432 КБ.Ваш сервер должен обслуживать эти потраченные впустую байты каждому клиенту, за который вы, возможно, платите.

Глядя на некоторые другие ваши изображения, вы увеличиваете их.Современные браузеры будут пытаться плавно масштабировать изображения, но при этом вы всегда будете терять качество отображения.Лучше всего подбирать изображения в точных размерах, которые вы хотите отобразить, когда сможете.