Question

我使用这个＆＃34; Tutorial＆＃34;来为投资组合创建了一个自适应图像缩略图库。

本教程非常完整和教学（我是一个大菜鸟），但并不涵盖一个部分：教程制作者使用的都是风景风格的图像。

对于我的投资组合，缩略图将交替横向和纵向图像。

使用这两种方向给div提供了一种无序的外观和感觉，这不是我想要的。

解决此问题的一种简单方法是手动裁剪肖像图像以适合风景风格。这是一种我不愿意诉诸的古老技巧。

我意识到另一种方法是，不使用img标签，而是使用适合图像框的div的背景图像和背景包含。我不想做的事情，因为它意味着为每个缩略图创建一个新的css类（我想，不确定）

有人遇到了同样的问题，但他使用jquery来修复它。由于我学习css，我认为我可能更好地尝试使用css来解决这个问题。

＆＃34; Link＆＃34;

我的主要限制是我希望页面保持响应，并让我的图像保持其宽高比，因此宽度：100％和高度：100％。

如果你想让我做一个小提琴，只要问一下，你就会得到。

感谢阅读，希望我明白自己，英语不是我的主要语言。

编辑：这是一个小提示，显示<img> <div>和css是如何形成的。 http://jsfiddle.net/R8B27/（我建议调整＆＃34;结果＆＃34;框以确切地看到它如何混乱）升。

Answer 1

这里的主要问题是裁剪图像的垂直对齐方式（在您的情况下是纵向图像）。

如果您可以使用默认对齐这些图像，这意味着只显示图像的顶部，您可以使用此技术：

<强> FIDDLE

我在您的示例中添加/修改的CSS：

.galleryItem a{
    display:block;
    position:relative;
    padding-bottom:50%;
    overflow:hidden;
    border-radius: 5px;
}
.galleryItem a img {
    position:absolute;
    width: 100%;
    height:auto;
    display:block;
}

Answer 2

我遇到过类似的情况，解决方案需要同时包含肖像和风景图片。这是我的解决方案：

min-width: inherit;
min-height: inherit;
max-height: 63vmin;
object-fit: cover;

父对象是一个具有“vmin”响应大小的圆，因此“vmin”为“max-height”。 '继承'用于始终填充父对象并在'对象适合'上'覆盖'以免失去比例。由于超过 1:2 比例的肖像图片很少见，因此使用“最大高度”作为控制因素；意思是通过一个高度变量来控制多余的宽度截断。

关于在div里面定位图片，我最近发现这个摘录的使用非常有用：

margin: 0;
padding: 0;
-webkit-transform: translate(-50%, 0%);
position: absolute;
left: 50%;
top: 0%;

'margin' 和 'padding' 为 '0'，你可以减少图片上多余的重量。 '-webkit-transform: translate' 将允许您更改项目的原点或选取点。将此设置为“-50%, 0%”会将原点设置为图片的中心顶部（对于位于项目内部的原点，这应该始终为负值）。 '左：50%；顶部：0%;'会将项目的原点放置在容器的中心顶部。

Answer 3

在所有最新的浏览器中（假设您不再使用 IE），您可以为此使用“object-fit”。只需添加此 css：

.center-cropped {
    object-fit: cover;
    object-position: center;
    height: 200px;
    width: 270px;
}

...

而在html中，你可以直接在img标签中使用这个类：

<div>
    <img class="center-cropped" src="~/Images/yourImage.jpg" />
</div>

这将仅显示图像的“居中”版本，包括纵向和横向图像

同时使用纵向和横向图像自动裁剪以适合缩略图

3 个答案: