图像库的裁剪图像问题

Posted 2023-02-25

【中文标题】图像库的裁剪图像问题

【英文标题】：Issue with cropped images for an image gallery

【发布时间】：2012-11-05 21:53:35

【问题描述】：

我有一个图片库。缩略图的宽度为 240 像素，但高度各不相同。我尝试裁剪图像，使它们的高度均为 150 像素。

目前我有这个：

html

<div data-category="category1">
<a href="image1.jpg" rel="lightbox[on]" title="">
<img src="image1.jpg"   />
</a></div>

<div data-category="category1">
<a href="image2.jpg" rel="lightbox[on]" title="">
<img src="image2.jpg"   />
</a></div>

<div data-category="category1">
<a href="image3.jpg" rel="lightbox[on]" title="">
<img src="image3.jpg"   />
</a></div>

<div data-category="category2">
<a href="image4.jpg" rel="lightbox[on]" title="">
<img src="image4.jpg"   />
</a></div>

<div data-category="category2">
<a href="image5.jpg" rel="lightbox[on]" title="">
<img src="image5.jpg"   />
</a></div>

<div data-category="category2">
<a href="image6.jpg" rel="lightbox[on]" title="">
<img src="image6.jpg"   />
</a></div>

CSS

 .gallery 
 position:relative;
 

 .gallery > div 
 position:absolute;
 

 .gallery > div > a > img 
 position:absolute;
 top: 0;
 left: 0;
 clip: rect(0px,240px,150px,0px);
 overflow: hidden;
 border:none;
 

这适用于将图像裁剪为 150 像素，但只有顶行的图像是对齐的。其他行上的图像未对齐，因为它们被放置在上一行图像的原始高度的正下方。 （裁剪并没有摆脱图像的其余部分。图像的其余部分不可见，但它仍然存在，）。我需要在我的 CSS 中添加什么来解决这个问题？

【问题讨论】：

请出示相关的HTML。

设置绝对定位的 position:relative 在哪里？

你试过类似.gallery > div > a max-height: 150px; overflow: hidden; 吗？

... 尝试添加 display:block 或 inline-block ... 否则 A 标签不占高度：.gallery > div > a max-height: 150px; overflow: hidden; display: inline-block;

这可能是 jQuery 问题吗？我有一个 js 文件，它使所有图像的宽度为 240 像素，因此高度也与 240 像素成比例。

【参考方案1】：

您的代码肯定比您粘贴在这里的内容要复杂一些，但请考虑这个基础 css：

.gallery   position: relative;  
.gallery > div   float: left;  
.gallery > div > a   max-height: 150px;  width: 240px;  overflow: hidden;  display: inline-block;  
.gallery > div > a > img   border: none;  

这是一个工作示例：

http://jsfiddle.net/3W7Xt/

问候