CSS剪辑和绝对定位 [英] CSS Clip and Absolute Positioning

问题描述

我使用剪辑为图库创建缩略图。不幸的是，剪辑只能在元素被绝对定位时使用。应用于每个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.

                        
这篇关于CSS剪辑和绝对定位的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！