如何实现div保持一定的比例进行缩放

62 阅读1分钟

如何实现div保持一定的比例进行缩放

效果:

代码:

布局部分

  <div class="img-container">
    <img src="../../../static/image/test.png">
  </div>

样式部分(width和padding-top设置为相同的值即可保持长宽比例1:1)

.img-container {
  position: relative;
  width: 50%;
  padding-top: 50%; //调整图片比例

  img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
}