我使用这个" Tutorial"来为投资组合创建了一个自适应图像缩略图库。
本教程非常完整和教学(我是一个大菜鸟),但并不涵盖一个部分:教程制作者使用的都是风景风格的图像。
对于我的投资组合,缩略图将交替横向和纵向图像。
使用这两种方向给div提供了一种无序的外观和感觉,这不是我想要的。
解决此问题的一种简单方法是手动裁剪肖像图像以适合风景风格。这是一种我不愿意诉诸的古老技巧。
我意识到另一种方法是,不使用img标签,而是使用适合图像框的div的背景图像和背景包含。我不想做的事情,因为它意味着为每个缩略图创建一个新的css类(我想,不确定)
有人遇到了同样的问题,但他使用jquery来修复它。由于我学习css,我认为我可能更好地尝试使用css来解决这个问题。
" Link"
我的主要限制是我希望页面保持响应,并让我的图像保持其宽高比,因此宽度:100%和高度:100%。
如果你想让我做一个小提琴,只要问一下,你就会得到。
感谢阅读,希望我明白自己,英语不是我的主要语言。
编辑:这是一个小提示,显示<img>
<div>
和css是如何形成的。 http://jsfiddle.net/R8B27/(我建议调整&#34;结果&#34;框以确切地看到它如何混乱)
升。
答案 0 :(得分:3)
这里的主要问题是裁剪图像的垂直对齐方式(在您的情况下是纵向图像)。
如果您可以使用默认对齐这些图像,这意味着只显示图像的顶部,您可以使用此技术:
<强> 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;
}
答案 1 :(得分: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%;'会将项目的原点放置在容器的中心顶部。
答案 2 :(得分:0)
在所有最新的浏览器中(假设您不再使用 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>
这将仅显示图像的“居中”版本,包括纵向和横向图像