容器div中的图像拟合

Question

我正在尝试用图像填充容器，但我找不到解决方案。

如果图像太短，我需要让它们全高，但它们会溢出两侧。 如果图像太窄，我需要将它们全宽，但它们可以溢出底部。

<div class="cb-img-fw four-image">
    <a href="postURL"><img src="imageURL"></a>
</div>

和当前的css

.four-grid-post > .four-image{
max-height: 184px;
max-width: 271px;
overflow: hidden;
}

.four-grid-post > .four-image img{
min-width: 100%;
max-width: 100%;
height: auto;
}

我也对jQuery解决方案持开放态度，但我的内容加载了ajax，因此可能会导致一些问题。

Answer 1

您可以使用object-fit和object-position CSS3属性。 Edge中尚不支持它们，但有a polyfill。 请参阅feature support on CanIUse。

＆＃13;

＆＃13;

.four-grid-post > .four-image {
	display: inline-block;
	height: 184px;
	width: 271px;
	overflow: hidden;
	border: dashed 2px red;
}

.four-grid-post > .four-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top center; /* To crop from the bottom */
}

＆＃13;

<div class="four-grid-post">
	<div class="cb-img-fw four-image">
		<a href="postURL"><img src="http://placehold.it/400x300"></a>
	</div>
	<div class="cb-img-fw four-image">
		<a href="postURL"><img src="http://placehold.it/400x200"></a>
	</div>
	<div class="cb-img-fw four-image">
		<a href="postURL"><img src="http://placehold.it/300x400"></a>
	</div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

我建议更改css img上的background。

.four-image {
  display: block;
  border: 1px solid gray;
  width: 271px;
  margin-bottom: 1em;
}

.four-image a {
  display: block;
  width: 271px;
  height: 184px;
  background-size: cover;
  background-position: center center;
}

<div class="cb-img-fw four-image">
  <a href="postURL" style="background-image: url('http://placehold.it/600x200');"></a>
  600x200
</div>
<div class="cb-img-fw four-image">
  <a href="postURL" style="background-image: url('http://placehold.it/200x600');"></a>
  200x600
</div>
<div class="cb-img-fw four-image">
  <a href="postURL" style="background-image: url('http://placehold.it/600x600');"></a>
  600x600
</div>

Answer 3

试试这个脚本 它会将您的图像设置为背景图像 然后你可以给背景图像的高度和宽度，并使其背景大小覆盖

var images = $(".four-image").find("img");
 $.each(images, function (index, item) {
 var $item = $(item),
 src = $item.attr('src'),
 cont = $item.closest('.four-image').css('background-image', 'url(' + src + 
 ')');
});