在圆形div中具有宽高比的完整图像

Question

我正在尝试将个人资料页面放在一起，并希望图片在OrderSelect()/Order*()内是圆形的。我希望图像保持其纵横比。图像尺寸未知，用户可以上传任何图像尺寸。

以下是代码：

＆＃13;

＆＃13;

Strategy Tester

＆＃13;

div

＆＃13;

$(window).load(function(){
 $('.profile-img').find('img').each(function(){
  var imgClass = (this.width/this.height > 1) ? 'wide' : 'tall';
  $(this).addClass(imgClass);
 })
})

＆＃13;

＆＃13;

＆＃13;

Answer 1

以下设置图像的高度或宽度，具体取决于图像宽度和高度的值。

＆＃13;

＆＃13;

$(window).load(function() {
  $('.profile-img').find('img').each(function() {
    if(this.width / this.height > 1)
      this.height = $(this).parent().height();
    else
      this.width = $(this).parent().width();
  });
});

＆＃13;

.profile-img {
  height: 150px;
  width: 150px;
  overflow: hidden;
  border-radius: 50%;
  box-shadow: 0 0 5px silver;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="profile-img" class="profile-img">
  <img src="http://i.stack.imgur.com/2kpOL.png" />
</div>
<div id="profile-img-2" class="profile-img">
  <img src="http://i.stack.imgur.com/JIVkh.png" />
</div>

＆＃13;

＆＃13;

＆＃13;