Question

如何在不拉伸的情况下将所有图像设置为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

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

＆＃13;

 .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%);
 }

＆＃13;

<div class="img-container">
  <img src="http://lorempixel.com/image_output/people-q-c-112-80-1.jpg">
</div>

＆＃13;

Answer 2

使用<img>标记无法实现此目的，因为不成比例地更改初始图像尺寸将始终导致难看的图像缩放。相反，您可能会发现它更适合使用background-image

<div class="item"></div>

.item {
    background: url('path/to/your/image.jpg') center center no-repeat;
    -webkit-backround-size: cover;
    backround-size: cover;
    width: 40px;
    height: 40px;
}

它不会给你100％的效果，但至少你可以很好地控制你的图像容器大小，你的图像仍然会占用所有这些而不改变宽高比。

UPD ：如果您正在评论中讨论用户个人资料照片，那么您肯定需要寻找更复杂的解决方案。而且肯定它已经在你面前发明了。

Answer 3

要使用图像完全填充容器而不进行拉伸，您有两个选项：

background-image 使用：background-size: cover;

#image {
outline: 2px solid red;
width: 550px;
height: 150px;
position: relative;
background: url('http://i.imgur.com/HNj6tRD.jpg');
background-repeat: no-repeat;
background-size: cover;
float:left;
}

<div id="image" alt=image></div>

常规图片在容器上使用object-fit: cover;加overflow:hidden。使用object-position: 0% 0%;进行定位。

#img {
  width: 100%;
  height: 100%;
  object-position: 0% 0%;
  -o-object-fit: cover;
  object-fit: cover;
}

#cover {
  width: 550px;
  height: 150px;  
  outline: 2px solid red;
  overflow: hidden;
}

<div id="cover"><img id=img src="http://i.imgur.com/HNj6tRD.jpg"></div>

Answer 4

所有具有等级pic的图像尺寸为40px x 40px，无需拉伸（即实际图像尺寸，但会用白色空间填充周围区域）

.pic {
        width: 40px; //your image size
        height: 40px; //your image size

        /*Scale down will take the necessary specified space that is 40px x 40px without stretching the image*/
        object-fit:scale-down;
    }

如何将所有图像设置为相等的宽度和高度而不拉伸

4 个答案: