How can i insert different size image in the center of the box?

Question

How can i insert different size image in box centered? Image has a different size . portrait (height is bigger than width), landscape (width is bigger than height), square (width is same as a height) and The red box has a convertible size.(not only square)

I use a code like this

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%");
    }
  }
}

It worked. But this way depends on document(image,javascript) loading time, so there are any best way to insert different size image in the center of the box? *There are no empty space exists inner Red box!

Answer 1

Try this.

 .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> 

Answer 2

What you want is to use the <picture> HTML element tag , with sources appropriate to the media queries for the various situations (eg landscape vs portait, screen resolution/DPIs, etc). The browser will then load the appropriate image automatically.

This blog post should give some additional context on how they are used.

Answer 3

use inline-flex box to align the images, I have created this fiddle to show the usage https://jsfiddle.net/swvdfzax/

the CSS will be

div.image{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:2px solid red;
  height:60px;
  width:60px;
  vertical-align:top
}
div.image img{
  max-height:100%;
  max-width:100%;
}

and the HTML will be

<div class="image"><img src="...path/to/image"></div>

Answer 4

Try this code

 $(function(){ $(".image_insert").each(function(){ var container = $(this).parent(); var img = $(this); img.css({ left: -1 * (img.width()/2 - container.width()/2), top: -1 * (img.height()/2 - container.height()/2) }); }); }); 

 .image{ position:relative; width:200px; height:200px; overflow:hidden; border: 1px solid red; } .image_insert{ position:absolute; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="image"> <img class="image_insert" src="http://lorempixel.com/300/400/"> </div> <div class="image"> <img class="image_insert" src="http://lorempixel.com/400/300/"> </div> <div class="image"> <img class="image_insert" src="http://lorempixel.com/400/400/"> </div> 

JSFiddel demo here https://jsfiddle.net/g868ae1h/1