CODEWITHSUNDEEP
jqueryhtmlcsstwitter-bootstrap
Ray
Ray

Reputation: 9674

How to set all images to equal width and height without stretching

How can I set all images to have an equal size of 40x40 without stretching?

I tried to do the following but it did not work:

<style>
 .img-container {
     width: 40px;
     height: 40px;
 }

 .pic {
     width: 100%;
     max-width: 100%;
 }
</style>

<div class="img-container">
    <img src="image_path" class="pic" />
</div>

I am forced to use overflow: hidden and it will basically crop half of it. Is there a way I can achieve equal width and height with jQuery or Bootstrap?

Upvotes: 3

Views: 4085

Answers (4)

Bram Vanroy
Bram Vanroy

Reputation: 28437

Are you sure this isn't what you want? The image will scale to the container fine, and the spare space is filled by the container's background. Also, the image is centred perfectly, no matter what the dimensions.

 .img-container {
   width: 40px;
   height: 40px;
   border: 1px solid;
   position: relative;
 }
 .img-container img {
   width: 100%;
   height: auto;
   position: absolute;
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%);
 }
<div class="img-container">
  <img src="http://lorempixel.com/400/200" alt="Random image">
</div>

Upvotes: 4

Manoj Selvin
Manoj Selvin

Reputation: 2383

All images that will have class pic will be of size 40px x 40px without stretching (ie.actual image size but will fill the area around it with white space) 

.pic {
        width: 40px; //your image size
        height: 40px; //your image size

        /*Scale down will take the necessary specified space that is 40px x 40px without stretching the image*/
        object-fit:scale-down;
    }

Upvotes: 0

L777
L777

Reputation: 8457

To fully fill the container with an image without to stretch you have 2 options:

for background-image use: background-size: cover; 

#image {
outline: 2px solid red;
width: 550px;
height: 150px;
position: relative;
background: url('http://i.imgur.com/HNj6tRD.jpg');
background-repeat: no-repeat;
background-size: cover;
float:left;
}
<div id="image" alt=image></div>

for regular images use: object-fit: cover; plus overflow:hidden on the container. Use object-position: 0% 0%; for positioning.

#img {
  width: 100%;
  height: 100%;
  object-position: 0% 0%;
  -o-object-fit: cover;
  object-fit: cover;
}

#cover {
  width: 550px;
  height: 150px;  
  outline: 2px solid red;
  overflow: hidden;
}
<div id="cover"><img id=img src="http://i.imgur.com/HNj6tRD.jpg"></div>

Upvotes: 1

markoffden
markoffden

Reputation: 1468

There is no way achieving this with <img> tag, as changing initial image dimensions unproportionally will always lead to ugly image scaling. Instead you may find it more suitable here to use background-image

<div class="item"></div>

.item {
    background: url('path/to/your/image.jpg') center center no-repeat;
    -webkit-backround-size: cover;
    backround-size: cover;
    width: 40px;
    height: 40px;
}

It will not give you 100% desired effect, but at least you will be able to control your image container size nicely, and your image will still occupy all of it without changing aspect ratio.

UPD: In case of user profile pic you are discussing in the comments, you definitely need to look for more complex solution. And for sure it was already invented before you.

Upvotes: 1

Related Questions