IMG填补其容器空间，而不拉伸

在这个小提琴看看：http://jsfiddle.net/5mneypc5/IMG填补其容器空间，而不拉伸

它包含以下代码：

<style type="text/css"> 
.container { 
    width: 400px; 
    height: 200px; 
    overflow: hidden; 
    background: grey; 
    margin-bottom: 10px; 
} 

#c-width { 
    width: 350px; 
} 
#c-height { 
    height: 150px; 
} 

.container > img { 
    max-width: 100%; 
    max-height: 100%; 
} 
</style> 
<div class="container" id="c-width"> 
    <img src="http://lorempixel.com/500/250/cats/5"> 
</div> 
<div class="container" id="c-height"> 
    <img src="http://lorempixel.com/500/250/cats/5"> 
</div>

是否有可能使它充满整个容器空间，而不被拉长？裁剪是允许的。

我试过min-height, max-width和max-height, min-width的情况，但每个只适用于我的一个容器。

纯CSS是优选的;但是，JavaScript/jQuery解决方案也受到欢迎。

来源

2014-12-19 mrdaliri

请注意，图像大小已知（预定义），但容器大小基于vie wport大小。 – mrdaliri 2014-12-19 04:19:09

使用背景图片，而不是一个img元素：

.container { 
    background-image:url('../images/bg.png'); 
    background-repeat:no-repeat; 
    background-size:cover; 
    background-position:center; 
}

来源

2014-12-19 04:18:43

谢谢，但我必须在这里使用''。 – mrdaliri 2014-12-19 04:19:57

当你不得不使用img时，我想不出一个用例。例如， – 2014-12-19 04:20:58

照片库。 – mrdaliri 2014-12-19 04:21:51

.container img{ 
    width:100%; 
}

例 - jsfiddle

我认为它帮你

来源

2014-12-19 04:30:49

在IMG使用一个为100％，其他在自动取决于偏好和图像比例。此外，你给两个不同大小的同一个div。一个有一个课，另一个有一个ID。选择一个，然后根据需要使用@media更改设备大小。试试这个，让我知道。

来源

2014-12-19 04:38:58 Leighthel

您需要更改max-width: 100%;和max-height: 100%;到min-width: 100%;和min-height: 100%;

下面是更新了自己的提琴：http://jsfiddle.net/5mneypc5/1/

来源

2014-12-19 05:10:42

它根本不会裁剪图像。 – mrdaliri 2014-12-19 05:13:53

但它正在裁剪图像。 – 2014-12-19 05:14:46

是的，我很抱歉。它会收割，但不会调整图像大小。如果你删除了'min-height'和'min-width'，结果是一样的。 – mrdaliri 2014-12-19 05:17:12

试试这个，

.container > img { 
    width: 100%; 
    height: 100%; 
}

我希望这是ü有用

来源

2014-12-19 05:52:46 Sathish

谢谢，但它改变了照片比例。 – mrdaliri 2014-12-19 06:56:23

是的，它肯定会发生，因为我们改变了原来的宽度和高度， – Sathish 2014-12-19 07:23:59

IMG填补其容器空间，而不拉伸

回答

相关问题