what is the best way to center image without cropping?

Question

[![

.img_div{
      height: 150px;
      width: 150px;
      overflow: hidden;
}
img.prof_img{
      height: 100%;
}

<div class='img_div'> <?php echo "<img class='prof_img' src='$location' alt=''>"; ?> </div>

what is the best way to center image without cropping ?]2]2

Answer 1

.img_div{
      height: 150px;
      width: 150px;
      overflow: hidden;
}
img.prof_img{
     width: 100%;
}

you could even add a

transform: scale(1.1); inside of your img.pro_img selector if you need to center it more..

Answer 2

You could use something like this.

<div class='img_div' style="background-image: url('<?php echo $location; ?>'); background-position: center;"></div>

note the use of background-position: center;

Answer 3

img.prof_img{
  height: 100%;
  display:block;
  margin:0 auto;
}

Answer 4

Because the picture aspect ratio is different than the container its impossible to make it fill the container.

As I see in your example, you want to show preview of the uploaded image, if you only want to show preview and not modify it as if it was user profile picture then you can do it like this, its a simple solution and it may work in this case... wont work for tall image.

Here is a similar question that may help.
Try depa's solution

Answer 5

There are a couple of ways to do this. From the top of my head.

• Constrain img proportions in HTML (but this is not advised)
• Set proportions in CSS
• using the background-size with background-image property.

i'd recommend going over the last one , as the first two are widely not in use today , unless you are dealing with some rigid CMS .

A fiddle for demo here

Answer 6

Try this inserting your image

.container{
width: 150px;
height: 150px;
float: left;
background: yellow;
border: solid 1px #000;
text-align: center;
}
.container img{
max-width: 100%;
max-height: 100%;
margin: auto;
}

<div class="container">
<img src="Untitled-2.png" alt="" title="" />
</div>