css 缩略图_使用CSS自动生成图像缩略图

css 缩略图

Talking about the concepts of

CSS filters with my class, I realized that one could use the clip or overflow properties to automatically generate thumbnails for a web image gallery. In most gallery designs it’s important for thumbnails to be exactly the same dimension or aspect ratio, and creating each thumbnail often takes a series of steps in an image editor.

CSS过滤器的概念时，我意识到可以使用clip或overflow属性自动为Web图像库生成缩略图。 在大多数画廊设计中，缩略图必须具有完全相同的尺寸或宽高比，并且创建每个缩略图通常需要在图像编辑器中执行一系列步骤，这一点很重要。

Taking full-size gallery images and clipping them to size as navigational images would eliminate those steps, lowering page creation time. It could also decrease page download time: rather than loading both the thumbnails and the full-size images, you would only have to load a single set of large images once.

拍摄全尺寸的图库图像并将其裁剪为导航图像的大小将消除这些步骤，从而减少页面创建时间。 它还可以减少页面下载时间：您不必加载缩略图和完整尺寸的图像，而只需加载一次大型图像集。

To achieve this, we would load the full-size images into our gallery navigation:

为此，我们将全尺寸图片加载到图库导航中：

<ul id="gallery-nav">
	<li>
		<a href="#">
			<img src="sunset-muriwai-beach.jpg" alt="Muriwai Beach">
		</a>
	<li>
		<a href="#">
			<img src="big-wheel.jpg" alt="Sunset behind ferris wheel">
		</a>
	<li>
		<a href="#">
			<img src=cornwall-sunset.jpg alt="Sunset In Cornwall">
		</a>
</ul>

Note that the images all have different sizes and aspect ratios, and that they lack width and height. I will add a little CSS to the gallery navigation as a whole:

请注意，所有图像均具有不同的大小和纵横比，并且它们缺乏宽度和高度。 我将在整个图库导航中添加一些CSS ：

ul#gallery-nav {
	list-style: none;
	margin-left: 0;
}
ul#gallery-nav li a {
	display: block;
	width: 100px;
	height: 100px;
	margin-bottom: 20px;
}

I’ve set display: block on the a elements in order to provide them with a width and height (as an inline tag, links will not take dimensions by default). These match the dimensions we’re about to apply with clip.

我在a元素上设置了display: block ，以便为它们提供width和height (作为内联标签，链接默认情况下不会采用尺寸)。 这些与我们将要应用clip的尺寸匹配。

ul#gallery-nav li a img {
	border: none;
	position: absolute;
	clip: rect(0px 100px 100px 0px);
	height: 200px;
}

Elements that we apply clip to must be positioned absolutely. Our clip measurements make the thumbnails square, although you could alter the aspect ratio to be whatever you wished. Note that we’re using the non-spec version of clip without commas between the values to make it work in IE. I’ve used a technique borrowed from responsive design to set the images to all the same height, without needing to specify the width.

我们应用clip元素必须绝对放置。 尽管您可以将纵横比更改为所需的值，但我们的剪辑测量使缩略图变为正方形。 请注意，我们使用的非规范版本的clip值之间没有逗号，以使其在IE中起作用。 我使用了从响应设计中借用的技术，将图像设置为所有相同的高度，而无需指定宽度。

An alternative approach, if you don’t want to use clip:

如果您不想使用clip ，则可以使用另一种方法：

ul#gallery-nav {
	list-style: none;
	margin-left: 0;
}
ul#gallery-nav li a {
	display: block;
	width: 100px;
	height: 100px;
	margin-bottom: 20px;
	overflow: hidden;
}
ul#gallery-nav li a img {
	border: none;
}

While it’s very useful, there are a few drawbacks to this technique that should be noted:

尽管它非常有用，但应注意此技术的一些缺点：

• This approach is only really practical for galleries with a dozen images or less. Anything more and the thumbnails will probably take too long to generate (as the page is loading in every full-size image before shrinking and clipping it).
  这种方法仅对具有十几个图像或更少图像的画廊才真正实用。 还有更多内容，缩略图生成可能会花费很长时间(因为页面在缩小和剪切之前已加载到每个全尺寸图像中)。

• Perhaps most importantly, there’s no aesthetic control over how individual thumbnails are cropped: the clip area always starts and stops at the same points. Essentially, this is a CSS batch processing technique for cropping images. The only way around this limitation would be to write inline style changes to any image that didn’t look quite right.

  也许最重要的是，对于如何裁剪单个缩略图没有美学上的控制：剪辑区域始终在同一点开始和停止。 本质上，这是用于裁剪图像的CSS 批处理技术 。 解决此限制的唯一方法是将内联样式更改写入看起来不太正确的任何图像。

You could combine this approach with any number of PHP directory read techniques that I’ve talked about on this blog to auto-generate the entire gallery content.

您可以将此方法与我在此博客中讨论的任何数量的PHP目录读取技术结合使用 ，以自动生成整个图库内容。

翻译自: https://thenewcode.com/492/Use-CSS-to-Auto-Generate-Image-Thumbnails

css 缩略图