Question

它包含以下代码：

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

Answer 1

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

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

Answer 2

.container img{
     width:100%;
}

示例 - jsfiddle

我认为它可以帮助你

Answer 3

在img上使用100％，另一个使用auto，具体取决于首选项和图像比例。此外，您给两个不同大小的相同div。一个有班级，另一个有班级。如果需要，选择一个，然后使用@media更改设备大小。试试看，让我知道。

Answer 4

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

以下是您的小提琴的更新：http://jsfiddle.net/5mneypc5/1/

Answer 5

试试这个。，

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

我希望这对你有用。

img填充其容器空间而不拉伸

5 个答案: