网站缩略图 (Bootstrap)

Question

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

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

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

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

这个 class 给了我想要的全尺寸图像的裁剪，但不幸的是，当我从全屏 (PC) 切换到移动设备时，图像的比例没有保留（图像应该在两个屏幕上看起来相同）。看起来 Div 宽度在拉伸，但高度保持不变。

全尺寸图像是 w:650px 由 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>

有人能给我指出正确的方向吗？

非常感谢

Answer 1

试试这个 css

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

Answer 2

将您的图像作为容器背景

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

Answer 3

您必须事先生成缩略图。你可以这样做；

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

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

网站缩略图 (Bootstrap)

Website Thumbnail (Bootstrap)

html

twitter-bootstrap-3

thumbnails