Question

我不想使用背景图片和background-size: cover，因为我想使用picture元素，因此它会为屏幕选择正确的图像。

我想确保它至少是宽度和高度的100％，但要保持其比例。

有办法做到这一点吗？

Answer 1

您可以使用min-height和min-width，将主题设置为100%并将overflow:hidden添加到父元素。像这样：

.parent-element-of-picture{
     overflow:hidden;
}
.picture{
     min-height:100%;
     min-width:100%;
}

您也可以设置width=100%和min-height:100%，反之亦然。

Answer 2

如果您不依赖Internet Explorer，则可以使用object-fit属性。您可以按如下方式使用它：

.picture {
    width: 100%;
    height: 100%;
    overflow: hidden;
    object-fit: cover; //or contain
}

为了支持IE，有JS polyfill：