html - Bootstrap : block image resizing

Question

例如，我在下面使用一张 YouTube 图片:

和 Bootstrap 来显示它:

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

但是图片被压坏了:

我是否缺少 Bootstrap 属性？还是一个普通的黑客？谢谢 !

编辑:

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

<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

图片被压碎是什么意思？你反对图片在一个圆圈中，或者它在圆圈中的显示方式？

我认为首先要理解的是，bootstrap 整体上是一个包含 html、css 和 javascript 规则的框架。所以要回答你的问题，没有属性(property)/黑客或者你失踪了。

它显示的原因是因为图像不适合 60x60 图像(或者更确切地说是圆圈中的裁剪)，因此裁剪掉不适合的部分。

我的意思是，虽然它在视觉上可能看起来不像，但它仍然采用 60x60 block ，只是在其中放一个圆圈并使外围透明。除了调整原始图片的大小外，几乎没有办法避免这种情况。

所以要么

a) 在 mspaint/photoshop/gimp 中编辑原始图片，使其更适合圆形裁剪b) 进入 bootstrap CSS 属性并更改 img 的宽度和高度属性。或者为图像设置最大宽度和最大高度，这样它就不会卡在 60x60 定义内。

img {
  width: value;
  height: value;
}

之所以要这样做，是因为万一将来要使用这样的图像，则不必通过 HTML 代码指定宽度和高度属性(这会导致您不必要的显示问题和代码可读性问题)，但它会自动将它应用到使用 CSS 规则的每个元素。