自动裁剪纵向和横向图像以适合缩略图答案

【问题标题】：Having both portrait and landscape images auto-crop to fit a thumbnail自动裁剪纵向和横向图像以适合缩略图
【发布时间】：2014-05-11 15:51:05
【问题描述】：

我一直在使用“Tutorial”为投资组合制作响应式图片缩略图库。

本教程非常完整且具有教学性（我是个大菜鸟），但没有涵盖一个部分：教程制作者使用的图片都是横向风格的。

对于我的作品集，缩略图将交替显示横向和纵向图像。

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

解决此问题的一种简单方法是手动裁剪纵向图像以适应横向风格。这是一种我宁愿不采用的古老技术。

我意识到另一种方法是不使用 img 标签，而是在适合图像框的 div 上使用 background-image 和 background-contain。我不想做的事情，因为这意味着为每个缩略图创建一个新的 css 类（我认为，不确定）

有人遇到了同样的问题，但他使用 jquery 来解决它。由于我正在学习 css，因此我认为尝试仅使用 css 解决此问题可能会更好。

“Link”

我的主要限制是我希望页面保持响应，以及让我的图像保持它们的纵横比，所以宽度：100% 和高度：100% 不可用。

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

感谢阅读，希望我能说清楚，英语不是我的主要语言。

编辑：这是一个显示<img> <div> 和css 的小提琴。 http://jsfiddle.net/R8B27/（我建议调整“结果”框的大小以准确查看它是如何混乱的） L.

【问题讨论】：

小提琴会很棒！
我添加了一个小提琴，交替使用纵向和横向图像，以便您可以看到手头的问题。
这样的东西能满足您的要求吗？ jsfiddle.net/webtiki/R8B27/1
您将固定像素区域设置为高度，使其与肖像缩略图匹配，但这不会破坏响应能力吗？另外，是否可以将照片的裁剪居中？
是的，你是对的，这可以解决。但是你介意肖像缩略图像在我的小提琴中那样被裁剪吗？意味着底部被裁剪。

标签： html css image

【解决方案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;
}

【讨论】：

这很棒，就页面布局而言，这就是我想要的！我只想说不幸的是，这仅显示图像的顶部，能够选择要裁剪图像的哪些部分可能会很好。无论如何，非常感谢您的时间和精力
@Lbab 这是一个问题，如果您无法确定特定类别来肖像图像，那么确定图像的裁剪方式将变得非常困难，但您可以通过添加 @ 来选择显示裁剪图像的底部987654324@给他们。顺便说一句，如果它有助于看到这里，请毫不犹豫地支持/接受答案：stackoverflow.com/about
非常感谢您的帮助！

【解决方案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%；'会将项目原点的位置设置为容器的中心顶部。

【讨论】：

【解决方案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>

这将只显示图像的“居中”版本，适用于纵向和横向图像

【讨论】：