javascript - 请教移动端图片响应式问题。

问题描述

问 题

艺术品店详情下面的图片是要从后台传过来的，一般是卡片机手机拍的照片，我想的是

 <div class="a">
    <img src="559718_2012092919343110edp.jpg">
 </div>
      
  <style>
  *{ margin:0;
     padding:0;} 
 .a{ width:100%; 
     height:150px;}

 .a img{ width:100%;
         height:100%;
         max-width:100%;
         max-height:100%;
    }
 </style> 
 

 

但是效果不好，怎么才能让图片宽高都等比例显示呢，如果光设置宽确实图片会缩小，但是高不受控制，在不尺寸的手机上看影响了整体布局。

解决方案

图片当背景啊，background-size:cover;

这篇关于javascript - 请教移动端图片响应式问题。的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！