图表的黄金比例

图表的黄金比例

.chart {
    width: 100%;
    background-color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #ddd;
    overflow: hidden;
    flex-wrap: wrap;
}

.chart img {
    /* max-width: 100%;
    max-height: 100%; */
    width: 640px;
    height: 480px;
    object-fit: contain;
}

图表的黄金比例为640 × 480 px,可以做到图表不随浏览器的大小,变化而变化,并且浏览器不是最大化的时候,还会根据页面的宽度自动决定每行放多少个图表.

不过,话又说回来了,你都固定了,它肯定不会随着浏览的宽度变化而变化.
而如果你设置了max-width: 100%;,那么图表就会随着浏览器的变大而变大,这种效果不好.

最后,注意.chart改变的是整个框住图表的属性,而.chart img则是每个图表的属性.