自举：块图像调整大小

我使用的YouTube画面下方的一个例如：自举：块图像调整大小

enter image description here

和Bootstrap以显示它：

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

但画面粉碎：

enter image description here

我是否缺少一个引导属性？或共同的黑客？谢谢！

编辑：

我终于找到了窍门做的工作：

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

来源

2016-02-19 kwn

检查CSS。有一个CSS规则，迫使图像保持它的比例。 –

链接的图像不是正方形，但是您给它方形的尺寸。它会挤压。你可以用'clip'裁剪图像。如果我没有弄错，twitter类只是给出了“边界半径”。 –

你确定吗？我在Plunker上尝试过，它的工作很好。检查引导链接 –

你是什么意思图片粉碎？你反对的是一个圈子里的图片，或者它在圈子里显示的方式？

我认为首先它是至关重要的理解，因为在整体上是一个框架包含html，css & javascript的规则。所以要回答你的问题，没有财产/黑客orso你错过了。

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

我说的是，虽然看起来可能不是这样，但它仍然需要60x60块，并在其中放置一个圆圈，并使郊区透明。除了调整原始图片的大小外，几乎没有办法避免这种情况。

因此，无论

一）编辑在MSPAINT /的Photoshop /瘸子原始图片任何所以它更适合圆作物内二）引导CSS属性里面去改变的宽度和高度属性IMG。或者为图像设置最大宽度和最大高度，以免它卡在60x60分辨率内。

img { 
    width: value; 
    height: value; 
}

为什么你会想那样做的原因，是因为如果你将要使用在未来的这样一个形象，你将不必通过指定的HTML代码的宽度和高度的属性（这会导致您不必显示问题和代码可读性问题），但它会自动将其应用于使用CSS规则的每个元素。

来源

2016-02-19 19:40:45 Rawrplus

我试图通过“引导财产”说是一件裁剪图像，这将改变一个矩形成正方形的属性，才能有正确的比例（因为我需要我的图片是60 * 60像素） – kwn

我强烈建议在一些图形编辑器中手动执行此操作（我个人的建议是photoshop，但其他任何方法都可以）。 – Rawrplus

自举：块图像调整大小

回答

相关问题