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

问题描述：

如何将所有图像设置为具有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达到相同的宽度和高度？

我不认为有这样做的任何方式。 –

对我而言，目前还不清楚你实际上想要做什么......如果你有一些尺寸不同于想要的目标尺寸的图片，但是你不想拉伸/缩小它，并且你也不想裁剪它。 ..那么你想用它做什么？ – arkascha

@arkascha，因为我正在开发一个网站，用户可以上传他们的个人资料图片，我无法猜测他们的图片尺寸。 – Raymond

答

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

.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/image_output/people-q-c-112-80-1.jpg"> 
 
</div>

答

无法通过<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：如果用户个人资料图片您正在评论中讨论，您肯定需要寻找更复杂的解决方案。当然，它已经在你面前发明了。

在很多情况下，使用bg图像是不可取的（从SEO和语义的角度来看）。例如，考虑屏幕阅读器。你需要图像的alt标签。 –

100％是真实的，但是如何让上传的图像（将具有不同的尺寸）占据所有容器空间而没有不成比例的缩放？ – markoffden

考虑到他/她接受了我的回答，我认为他们误解了他们的问题：它不应该被*覆盖*它应该只是缩放。看到我的答案。 –

答

要完全充满不拉伸的图像容器，你有两个选择：

为背景图像使用：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 on conta核能研究所。使用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>

答

，将有一流的PIC所有图片的大小为40像素的40像素X无拉伸（ie.actual图像大小，但将填补该地区周围有空格）

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

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

相关推荐