0

还有一个问题。我正在使用 HTML KickStart，没有 PhP 和任何东西。纯 css/js。有画廊的图像。每个图像都有通常的代码，例如

<div class="gallery">
  <a href="image.jpg"><img src="image_small.jpg" width="160" height="160"></a>
</div>

有效果和东西。问题是 - 如何动态裁剪/调整拇指大小以显示它们？想法是做这样的事情

<div class="gallery">
  <a href="image.jpg"><img class="thumb" src="image.jpg"></a>
</div>

使用相同的图像，但我不必在 Photoshop 中裁剪/调整每个图像的大小，是的，有像“Dropresize”这样的选项，我可以在几分钟内将它们变小，但是，当你可以使用 1 张图像时它更有用（和自动获得调整大小的拇指）而不是 2 个不同的拇指。

图像可以是任何尺寸，最大 900 像素宽度（或高度，或两者），因此拇指必须是
1）在最短边（160x210 或 300x160，任何方向）上调整为 160 像素
2）必须裁剪最长边，或必须有特定边距值

有什么选择吗？

4

1 回答 1

0

您可以像这样创建许多CSS类：

.thumb {
    max-width: 900px; 
}

.thumb160px {
    width: 160px; 
    height: 210px;
}

.thumb300px {
    width: 300px; 
    height: 160px;
}

或者，只设置一个值，例如宽度，如下所示：

.thumb160px {
    width: 160px; 
    height: auto;
}

.thumb300px {
    max-width: 300px; 
    height: auto;
}

并将其应用于您的HTML元素，如下所示：

<div class="gallery">
    <a href="image.jpg"><img class="thumb300px" src="image.jpg"></a>
</div>
于 2013-02-20T09:15:28.800 回答