Bootstrap：阻止图像大小调整

Question

我使用下面的YouTube图片，例如：

和Bootstrap显示它：

<img src="{{img}}" alt="{{title}}" class="img-circle" width="60px" height="60px">

但是这张照片很糟糕：

我错过了自助财产吗？还是一个普通的黑客？谢谢 ！

修改：

我终于找到了完成这项工作的诀窍：

<div class="crop">
    <img src="https://i.ytimg.com/vi/EONhJ9qvCPY/default.jpg" alt="#" >
</div>

并且

.crop{
    width: 60px;
    height: 60px;
    overflow:hidden;   
    position:relative;
    border-radius: 50%;
}

.crop img {
    position: absolute;
    left: -27px;
    top: -18px;
}

Answer 1

图片粉碎是什么意思？你是反对圈中的图片，还是它在圆圈中显示的方式？

我认为首先理解它是至关重要的，因为整个引导程序是一个包含html，css和amp;的规则的框架。 JavaScript的。所以要回答你的问题，你没有遗失任何财产/黑客。

它显示的原因是因为图像不能正确地适合60x60图像（或者更确切地说是圆圈中的裁剪），因此，它会裁剪出不适合的部分。

我所说的是，虽然视觉上看起来不像它，但它仍然需要60x60的块，只需在其中放一个圆圈并使周边透明。除了调整原始图片的大小之外，几乎没有办法避免这种情况。

所以要么

a）在mspaint / photoshop / gimp中编辑原始图片，以便更好地适应圆圈裁剪 b）进入bootstrap CSS属性并更改img的width和height属性。或者，为图像设置最大宽度和最大高度，使其不会卡在60x60定义中。

img {
  width: value;
  height: value;
}

你想要这样做的原因是因为如果你以后想要使用这样的图像，你不必通过HTML代码指定宽度和高度属性（这会导致你不必要的显示问题和代码可读性问题，但它会自动将它应用于使用CSS规则的每个元素。