Question

我想将img居中并缩放为{v}中设置宽度的div。如果我将.box上img的宽度设置为100％，则不会将img缩放到div。

.container{
    width:100vw;
    height:auto;
    min-height:70vh;
    background-color:blue;  
    display:flex;
    flex-wrap:wrap;
}

.box{
    width: calc(100vw / 4 );
    padding:10px;
    color:red;
}

.box img{
    width:100%;
    height:auto;
    margin:0 auto;
    background-color:white;
}

此外，当我将.box的宽度设置为100％时，它无法正常工作。我做错了什么？

Answer 1

只需添加：

.box img {
  max-width: 100%;
}

Answer 2

您可以使用以下方法将图像放入父容器中：

.image-parent {
    position: relative;
    overflow: hidden;
    width: 100vw;
    height: 70vw;
}

.fit-height {
    position: absolute;
    margin: auto;
    top: -100%;
    bottom: -100%;
    left: -100%;
    right: -100%;

    height: 100%;
    width: auto;
}

.fit-width {
    position: absolute;
    margin: auto;
    top: -100%;
    bottom: -100%;
    left: -100%;
    right: -100%;

    width: 100%;
    height: auto;
}

它将始终适合父容器，只需提供容器height和width

更新了8张图片的小提琴。例如，您可以使用height: 0和padding-bottom: 25%代替给定的高度。

JSFIDDLE

在CSS3中使用vw在DIV中使用img

2 个答案: