javascript - 如何在框的中央插入不同尺寸的图像？

Question

如何在框居中插入不同大小的图像？图像有不同的大小。纵向(高度大于宽度)，横向(宽度大于高度)，正方形(宽度与高度相同)并且红色框具有可转换尺寸。(不仅是正方形)

我使用这样的代码

HTML

<div class="image">
  <img class="image_insert" src="..">
</div>

CSS

.image{
    position:relative;
    width:100px;
    height:100px;
    overflow:hidden;
}

.image_insert{
    max-width:100%;
    position:absolute;
    margin:auto;
    left:50%;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform:translateX(-50%);
    top:0;
    bottom:0;
  }

JavaScript

function imageControl(){
 var image = document.getElementsByClassName('image_insert');
 var array = new Array();

 for(var i=0; i<image.length; i++){
  if(image[i].width>image[i].height){
    $(image[i]).css("max-width","none");
    $(image[i]).css("height","100%");
    }
  }
}

成功了。但是这种方式取决于文档(图像，javascript)的加载时间，所以有什么最好的方法可以在框的中心插入不同大小的图像？*红框内部没有空白!

Answer 1

试试这个。

.image {
  position: relative;
  display: inline-block;
}
.img-rectangle {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    border: 5px solid #BC2424;;
    width: 100px;
    height: 150px;
}

<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<div class="image"><img src="http://lorempixel.com/300/400/" /><div class="img-rectangle"></div></div>
<div class="image"><img src="http://lorempixel.com/400/300/" /><div class="img-rectangle"></div></div>
<div class="image"><img src="http://lorempixel.com/400/400/" /><div class="img-rectangle"></div></div>