响应式设计:fancybox缩略图库，调整图像大小并将其垂直和水平放置在包装的中心

Question

我知道SO中有很多这样的问题，但我没有找到一个完全满足我需求的解决方案

我正在使用fancyboxjQuery插件创建图像和幻灯片的缩略图库(非响应版本：此处-库在右侧)。

问题在于缩略图库——不同纵横比的图像会被上传并显示在缩略图库中。每个图像的包装器元素(.project_gallery a-内联锚点已显示为block)的尺寸为195x195px；

我希望图像拉伸到div的全部，并在垂直和水平方向居中。

如果您需要对上面的最后一句话进行任何解释 ，我在下面提供：

如果上传的图像的宽度小于高度，则应将宽度设置为在水平方向上完全填充包装器元素。即使将图像宽度调整为与包装器的宽度相等，图像高度也可能无法填充包装器的整个高度。因此，图像宽度仍然需要放大，以保持纵横比。在某个放大点，图像高度适合于整个包装高度，但图像宽度大于包装宽度。所以图像需要在水平方向上放置在包装纸的中心。图像的左侧和右侧可能会被裁剪，即：变得不可见。如果我们在刚才提到的解释中交换图像的高度和宽度，则应该发生相反的事情。

以及我需要以响应式设计的方式来做的所有这些事情。

编辑：图片库的HTML标记如下。a元素会很多，因为它是图像的包装器，并且会有很多图像。

<div class="project_gallery">
<a class="fancybox" href="some_href_here" data-fancybox-group="gallery" title="Project"><img src="assets/img/projects/img_name "   class="inline_block"  alt="image project"/></a>
...
</div>

EDIT2：正在开发的响应版本现在就在这里。

编辑3：如果您不喜欢查看任何特定网站，您可以只需考虑以下完整问题：

响应式设计缩略图库：如何调整大小并将纵横比随机变化的图像垂直和水平放置在相同大小的包装divs(img_wrapper)的中心，而不让包装的任何部分闲置？HTML标记和一位CSS如下：

HTML:

<div id="gallery">
<div class="img_wrapper"><img src="..." alt="img"/></div> 
//the above line will repeat as many images as are there.
</div><!-- end of id gallery-->

CSS：

<style>
#gallery{
width:70%
}
.img_wrapper{
width:25%;
float:left;
}
</style>

Answer 1

看看这是否有助于您开始：

CSS

.fancybox img.inline_block{
margin-left:0 !important;
}

.project_gallery a{
width:100%;
}
.project_right img:first-child{
margin-left:0;
}
.project_gallery a{
width: 100%;
height: 100%;
}  

您可能需要添加！对其中一些规则进行重要或额外的选择器，这样它们将占据优势并否决现有的默认值。

关于填充整个div的背景图像的行为，我认为现有的背景图像是：cover；设置应该按您的意愿进行。如果没有，请首先检查您的图像是否足够大，以填充分区。

你提到你想这样做是回应的方式。您的页面设计似乎没有响应，例如，顶部滑块中的图像是硬编码的1050px，因此这将防止页面以响应的方式折叠。除非你从现有的花式盒子插件转移到像灯箱这样的东西，否则我认为让现有的图库做出响应可能是一个挑战。

祝你好运！