Question

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

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

function changeDimension(arr, size) {  
  var arrLen = arr.length;
  var newArr = [];
  var count=0;
  var tempArr = [];

  for(var i=0; i<arrLen; i++) {
    count++;
    tempArr.push(arr[i]);

    if (count == size || i == arrLen-1) {
      newArr.push(tempArr);
      tempArr = [];
      count = 0;
    }    
  }  
  return newArr;
}

changeDimension([0, 1, 2, 3, 4, 5], 4);

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

全尺寸图像为w：650px by h：1000px

我的Div代码如下。

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

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

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

非常感谢

Answer 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>

＆＃34; 0px 0px＆＃34;代表应该看到缩略图的哪一部分例如：来自-10px的{{1}}和来自left

的-10px

Answer 2

试试这个css

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

Answer 3

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

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

要生成新的拇指，您必须使用某些软件或lib。

网站缩略图（Bootstrap）

3 个答案: