圖片在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內部不能縮放

回答

相關問題