html - 如何保持缩小图像的纵横比？

Question

我正在构建一个网站并遇到了这个问题:我有一张 345x300 的图像。

在我的 div 中，她得到 82 x 118 的宽度，保持这样:

我需要图像的宽度为 82 x 82，当我设置它时它会变平。

我该怎么做才能解决这个问题？抱歉我的英语不好。

如果需要，这是我正在工作的网站:https://2018.escambofotografico.com.br/ (我在页面末尾谈论的问题)

谢谢大家!

Answer 1

您也可以使用 object-fit 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