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

Question

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

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

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

 

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

Answer 1

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

Answer 2

其实你是想让宽度和高度联系起来对吧，height根据width改变而改变。这样的需求得曲线救国。

实现：

<p class="wrapper">
  .....其他内容

  <p class="imgwrap">
    <img>
  </p>

  .....其他内容
</p>

.wrapper {
  position: relative;
}
.imgwrap {
  position: relative;

  padding-top: 60%;
}
img {
  position: absolute;
  top: 0;

  width: 100%;
  height: 100%;
}

好了。现在的图片高度就是宽度的60%(自己设定)了。
关键点是：
1。百分比的padding是依据包含块的宽度改变的。
2。imgwrap的padding又充当img的高度。
最后，图片的高度就与宽度联系在一起了。

Answer 3

img {
    object-fit: cover;
}

具体情况请自行谷歌

Answer 4

编辑掉，思路错误。。。

Answer 5

图片高宽比固定可以设置宽度，高度auto

.img-responsive {
      display: block;
      max-width: 100%;
      height: auto;
}

用 hidden 属性决定父容器装不下图片时如何显示

---

另外如果要锁定非图片元素的高宽比，
可以设置宽度为百分比，高度0，
底部padding为实际高度对应百分比。

.item {
  float: left;
  margin: 10px 5%;
  padding-bottom: 33.98%;
  width: 21%;
  height: 0;
}

这样容器就会根据父容器尺寸动态缩放，而且锁定高宽比了。

---

谷歌到的原始答案

[http://zihua.li/2013/12/keep-height-relevant-to-width-using-css/]

[https://ruby-china.org/topics/17011#reply15]