jquery - 如何在不拉伸(stretch)的情况下将所有图像设置为等宽和等高

Question

如何在不拉伸(stretch)的情况下将所有图像设置为 40x40 的相同大小？

我尝试执行以下操作，但没有成功:

<style>
 .img-container {
     width: 40px;
     height: 40px;
 }

 .pic {
     width: 100%;
     max-width: 100%;
 }
</style>

<div class="img-container">
    <img src="image_path" class="pic" />
</div>

我被迫使用overflow: hidden，它基本上会裁掉一半。有没有一种方法可以使用 jQuery 或 Bootstrap 实现相等的宽度和高度？

Answer 1

你确定这不是你想要的吗？图像将很好地缩放到容器，而空闲空间由容器的背景填充。此外，无论尺寸如何，图像都完美居中。

 .img-container {
   width: 40px;
   height: 40px;
   border: 1px solid;
   position: relative;
 }
 .img-container img {
   width: 100%;
   height: auto;
   position: absolute;
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%);
 }

<div class="img-container">
  <img src="http://lorempixel.com/400/200" alt="Random image">
</div>