Question

我正在尝试从一些图像中创建缩略图，每个图像的尺寸不一定与其他图像相同。

这是我当前代码的 Fiddle 。我已经在其他一些网站上阅读了，甚至在这里我只需要设置图像类的宽度和高度，然后应用overflow：hidden属性，但这似乎不起作用。它仍在改变图像的纵横比。我知道我可以简单地删除高度或宽度属性，但我真的只想制作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来动态添加<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;
}

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

1 个答案: