网站缩略图（引导程序）答案

【问题标题】：Website Thumbnail (Bootstrap)网站缩略图（引导程序）
【发布时间】：2015-12-08 00:41:28
【问题描述】：

我有一个网页，其中包含全尺寸图像（缩略图）的裁剪部分。单击拇指时，它会打开完整大小的图像。

我想避免上传完整尺寸的图片和裁剪后的缩略图，所以我使用了下面的类来裁剪完整尺寸的图片。

.crop { 
 width: 100%;  
 overflow: hidden; 
}

.crop img {
 width: 100%;
 margin: -250px 0 0 0;
}

本课程为我提供了我想要的全尺寸图像的裁剪，但不幸的是，当我从全屏 (PC) 切换到移动设备时，图像的比例不会保持不变（图像在两个屏幕上看起来应该相同） .看起来 Div 的宽度正在拉伸，但高度保持不变。

完整尺寸的图像是 w:650px x h:1000px

我的 Div 代码如下。

<div class="col-sm-4 col-lg-4 col-md-4">
    <div class="thumbnail">
        <div class="crop">
            <img src="/Images/5.png" alt="Nil">
        </div>
        <div class="caption" style="padding-bottom: 0px">
            <h4 class="pull-right"><a href="#">#1</a></h4>
            <h4><a href="#">Title</a></h4>
        </div>
    </div>
</div>

请有人指出正确的方向吗？

非常感谢

【问题讨论】：

这是一个广泛的问题。您的拇指是在客户端还是服务器端缩小尺寸？究竟如何？
恐怕您需要更具体地回答您的问题。到目前为止你尝试过什么？你有什么困难？
graphicdesign.about.com/od/howto/ss/photoshop_crop.htm#showall
您要裁剪原始图像吗？

标签： html twitter-bootstrap-3 thumbnails

【解决方案1】：

把你的图片作为容器背景

CSS：

.Thumb-Box{
display:inline-block;
width: [your width here];
height: [your height here];
}
.Thumb-Box a{
display:inline-block;
height:100%;
width:100%;
padding:0;
margin:0;
}

HTML：

<div class="Thumb-Box" style="background: url('url');background-position: 0px 0px;"><a href="link here">&nbsp;</a></div>

"0px 0px" 代表应该看到缩略图的哪一部分例如：-10px 来自 left 和 -10px 来自 top

【讨论】：

【解决方案2】：

试试这个css

div {
    background: url(img_flwr.gif);
    background-size: 80px 60px;
    background-repeat: no-repeat;
    background-position: center;
}

【讨论】：

这会将 div 的背景设置为图像，因此您可以将其设置为仅图像的左上角或类似的东西

【解决方案3】：

您必须事先生成拇指。你可以做这样的事情；

<a href="http://example.com/img.jpg" taget=_blank>
    <img src="http://example.com/img.thumb.jpg" />
</a>

要生成新拇指，您必须使用一些软件或库。

【讨论】：