手機端正方形自適應

時間 2019-12-07

標籤手機端正方形自適應欄目 CSS 简体版

原文原文鏈接

利用 padding 來實現和利用css的僞類 after 或者before 來撐開css

width 百分之幾 padding 百分之幾同樣的寬度orm

具體代碼以下blog

.product-image {
    position: relative;
    display: inline-block;
    width: 100%;
    overflow: hidden;
}
.product-image:before {
    display: block;
    content: ' ';
    padding-bottom: 100%;
    width: 1PX;
}
.product-image img {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    transform: translateY(-50%);
}