Question

我一直在阅读许多解决方案并尝试了大部分解决方案，但遗憾的是我无法理解它，因为我希望它适用于所有浏览器。

我基本上想要的是自动裁剪图像（从中心）到定义的宽高比。这应该适用于＆＃34;肖像＆＃34;图像（在顶部和底部裁剪）以及横向图片（左右裁剪）。它必须具有响应性，以便图像始终具有所需的（和使用纵横比的高度）。

这里有很好的描述：Center Crop Images但是在那个解决方案中，我不知道图片是宽还是高。

我也不能也不想使用背景图片。

我可以让它在顶部和底部进行裁剪，但是当图像宽度超过所需的宽高比时，它会＆＃34;紧缩＆＃34;图像看起来扭曲。

以下是部分有效的解决方案之一：

＆＃13;

/* wrapper div */
.iw-so-article-thumb {
	position: relative;
	overflow: hidden;
/*	text-align: center;*/
/* ensures the image is always in the h-middle */
	border: 3px solid black;
}

/* create an aspect ratio of the wrapper */
.iw-so-article-thumb:before {
	content: "";
	display: block;
	padding-top: 100%;
}

.iw-so-article-thumb  img {
	position: absolute;
	top: -100%;
	right: -100%;
	bottom: -100%;
	left: -100%;
	margin: auto;
	display: block;
	min-width: 100%;
	min-height: 100%;
	object-fit: cover;
/* necessary to fill the frame/rescale the image */
}

＆＃13;

使用＆＃34; object-fit：cover＆＃34;但是我发现并没有在IE / Edge中（那里的照片将是＆＃34;嘎吱嘎吱的＃34;当裁剪应该发生在两侧时。

就像我说的那样，我尝试了很多其他在论坛/博客中找到的解决方案，但有些解决方案根本没用。

我怀疑宽边图像的侧面裁剪失败，因为图像包装中的纵横比是由高度与宽度的比例定义的，因此包装将采用响应宽度并调整高度（然后通过＆＃裁剪） 34;溢出：隐藏＆＃34;）。但是当图像比宽高比宽时，它无法处理这个问题。

我不确定是否有适用于所有浏览器的纯CSS解决方案，包括IE / Edge，我怀疑没有，但我很乐意接受其他教学。

响应式图像中心使用CSS

0 个答案: