html - 保持宽高比时图像的一部分的缩略图

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

这是我当前代码的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;
}

最佳答案

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

关于html - 保持宽高比时图像的一部分的缩略图，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/10608594/