圖片保持比例，padding的妙用

 要保持圖片的比例不變

 

 這一張圖片在不同分辨率（1980px, 1364px,移動端400px）下均保持了一定的比例不變。

方法：

padding以及margin的上下（margin-top | margin-bottom | padding-top | padding-bottom）使用百分比時。參考的是容器的寬度。注意不是容器的高度。

容器使用width:100% ，這樣容器的高度由padding-top撐開，高度為寬度的35%。這樣圖片的比例始終是 100:35 不會變形。