在保持纵横比的同时部分图像的缩略图

Question

我正在尝试从一些图像中创建缩略图，每个图像的大小不一定相同。

这是一个 Fiddle 与我当前的代码。我在其他一些网站上读过，甚至在这里我只需要设置图像类的宽度和高度，然后应用 overflow:hidden 属性，但这似乎不起作用。它仍在改变图像的纵横比。我知道我可以简单地删除 height 或 width 属性，但我真的只想制作 100x100 的图像裁剪。我尝试了 clip:rect() 但无法弄清楚如何使其工作。理想情况下，我想从全尺寸图像的中心裁剪 100x100，但使用剪辑，如果我的图像尺寸不完全相同，我认为我无法做到这一点。

.thumbnail {
    overflow:hidden;
    width:100px;
    height:100px;
    padding:10px;
    margin-left:10px;
    margin-right:10px;
    margin-top:10px;
    margin-bottom:10px;
    border:10px solid #EEEEEE;
}

Answer 1

使用css和html：

第一个解决方案：

html：

<div class="imageFrame">
    <img src="your_path" alt="thumb"  />
</div>

css：

.imageFrame {
    overflow:hidden;
    width:100px;
    height:100px;
    padding:10px;
    margin-left:10px;
    margin-right:10px;
    margin-top:10px;
    margin-bottom:10px;
    border:10px solid #EEEEEE;
    position:relative;
}

.imageFrame img{
    position: absolute;
    top:50%;
    left:50%;
    margin-left: -50px;
    margin-top: -50px;
    display: block;
}

第二种解决方案：

这里你将不得不使用一些 JS 将图像 url 路径动态添加到 <div class="imageFrame"。

html：

<div class="imageFrame" style="background-image: url('your_path');"></div>

css：

.imageFrame {
    overflow:hidden;
    width:100px;
    height:100px;
    padding:10px;
    margin-left:10px;
    margin-right:10px;
    margin-top:10px;
    margin-bottom:10px;
    border:10px solid #EEEEEE;
    position:relative;
    background-repeat: no-repeat;
    background-position: center center;
}