图片在flexbox内部不能缩放

-2

当图片位于flexbox内时，图片无法正确缩放（高度不会自动调整）。图片在flexbox内部不能缩放

下面是在Flex外部工作而不在内部工作的示例;

.image-size{ 
 
    height:auto; 
 
    width: 300px; 
 
} 
 
.container{ 
 
    display: flex; 
 
}

<img class="image-size" src="https://openclipart.org/image/2400px/svg_to_png/233274/arrow-circle.png" alt="circle" /> 
 
<div class="container"> 
 
    <img class="image-size" src="https://openclipart.org/image/2400px/svg_to_png/233274/arrow-circle.png" alt="circle" /> 
 
</div>

这到底是怎么回事？

来源

2017-05-03 Guerrilla

有什么不对？它们的宽度设置不是高度。柔性父级没有宽度或高度 – 2017-05-03 12:01:17

第一个图像比例尺，第二个图像不是，您是否单击运行？ – Guerrilla

缩放比例在哪里？应用300px的宽度，他们都是相同的大小 – 2017-05-03 12:03:55

它是Flexbox的常见问题。您必须将您的图片放入display:block项目中。 figure默认为块容器。这里是一个变通：

.image-size{ 
 
     height:auto; 
 
     width: 100%; 
 
    } 
 
    figure{ 
 
     width : 300px; 
 
    } 
 
    .container{ 
 
     display: flex; 
 
    }

<div class="container"> 
 
     <figure> 
 
     <img class="image-size" src="https://openclipart.org/image/2400px/svg_to_png/233274/arrow-circle.png" alt="circle" /> 
 
     </figure> 
 
    </div>

来源

2017-05-03 12:02:12

谢谢，这很好。 – Guerrilla

图片在flexbox内部不能缩放

回答

相关问题