CSS剪辑和绝对定位

本文介绍了CSS剪辑和绝对定位的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我使用剪辑为图库创建缩略图。不幸的是，剪辑只能在元素被绝对定位时使用。应用于每个img，这当然使他们都坐在一起使用一个CSS样式，像这样的东西。

.Thumbnails { position：absolute; height：105px; clip：rect（50px 218px 155px 82px）; }

我如何才能相互定位？我只想要基本的行。

解决方案

我不会推荐一个纯CSS解决方案。您是否考虑过图书馆，例如 phpThumb ？从那里你只使用以下css：

.Thumbnails {float：left}

对缩略图的引用看起来像这样：

< img src =path / to / phpThumb.php？src = image.jpg& h = 100& w = 100& zc = 1alt =some image/&

该行基本上创建一个100x100的缩略图，zc指定缩放裁剪，缩略图库会做一些漂亮的缓存来减少服务器负载。

I'm using clip to create thumbnails for a gallery. Unfortunately, clip can only be used when an element is absolutely positioned. Applied equally to each img, this of course makes them all sit on each other while using one CSS style, something like this.

.Thumbnails { position: absolute; height: 105px; clip: rect(50px 218px 155px 82px); }

How can I then position them relative to each other? I just want basic rows.

解决方案

I wouldn't recommend a pure css solution. Have you considered a library such as phpThumb? From there you just use the following css:

.Thumbnails{float:left}

And references to the thumbnails end up looking like this:

<img src="path/to/phpThumb.php?src=image.jpg&h=100&w=100&zc=1" alt="some image" />

That line would basically create a 100x100 thumbnail, the zc specifies a zoom crop (crop to match aspect ratio, and the thumbnail library does some pretty nifty caching to reduce server load.