Question

我有这个：

.home_post_cont { width: 228px; min-height: 331px;  }
.home_post_cont img { width: 228px; height: 331px; }

然后它完全适合容器。

我想要这个：

.home_post_cont img { width: 100%; height: 100%; } /* In case container size changes */

但我只能将宽度或高度设置为100％。我不希望图像缩放，所以即使它没有缩放，我希望它是容器的100％高度和宽度。

我该怎么做？

Answer 1

如果要保存父容器的原始大小和不严格指向高度的格式，则有2个选项。

首先 - 位置：绝对，尝试第一个选项：jsfiddle

第二 - 使用图片作为背景。 jsfiddle

＆＃13;

.home_post_cont { 
    width: 228px; 
    min-height: 331px; 
    background-color: #f00;
    position: relative;}

.home_post_cont img { 
    width: 100%; 
    height: 100%;    
    position: absolute;
    		top: 0;
			bottom: 0;
			left: 0;
			right: 0;
}

＆＃13;

<div class='home_post_cont'>
    <img src="http://www.cnc3.co.tt/sites/default/files/content/Glee.png" />
</div>

＆＃13;

Answer 2

由于宽度变化最小，因此您需要将调整大小作为基础。您似乎知道，要保持纵横比，您只能设置一个属性的大小。

.home_post_cont { width: 228px; min-height: 331px;  }
.home_post_cont img { max-width: 228px; max-height: auto; }

将Img高度和宽度设置为100％而不缩放

2 个答案: