如果图像较大而不扭曲图像，则将图像强制为特定尺寸？

Question

我目前正在使用图像并以100像素×100像素显示。不幸的是，有些图像被扭曲了......

即使原始尺寸为450 x 450，如何以100 x 100显示？

Answer 1

如果要显示整个图像，将大小设置为100 x 100会使图像失真。

如果您对显示整个图像不那么烦恼，可以将图像设置为背景，并在缩略图中显示图像的一部分。

为此，您可以使用以下内容：

<强> HTML

<div class="thumbnail firstImage">
   <a href="[link to full size image]">Thumbnail of some image</a>
</div>

<强> CSS

.thumbnail{
  width:100px;
  height:100px;
}
.thumbnail a{
  display:block;
  width:100%;
  height:100%;
  text-indent: -9999px;
}

.firstImage a{
  background: url([path to full size image]) 0 0 no-repeat;
}