让图片保持相对宽高

响应式布局下,经常要让图片大小保持相对宽高比例不变,则可以这样:

    <style>
      .respond_img{
        height:auto;
        width: 100%;
      }
    </style>
  </head>
    <div style="width:30%">
      <img class="respond_img" src="test1.jpg">
    </div>


  如果添加max-width:100%和height:auto,则图片按比例缩放不超过父元素的尺寸,
如果图片和父元素等宽,则用width: 100%;

猜你喜欢

转载自jackyrong.iteye.com/blog/2294712