CODEWITHSUNDEEP
phphtmlcssimage
healer
healer

Reputation: 93

display all image the same size regardless of its original size

I have a table for member. When i display all image in html I put and all of them are displayed with the same size but when I put class='img-responsive' they go back to their original size.

enter image description here

Upvotes: 1

Views: 4237

Answers (2)

Kervon Ryan
Kervon Ryan

Reputation: 684

Ok I now understand what you were asking. So let me explain.

All images have something called an aspect ratio. This can be 1:1 which means for every 1px(or whatever your unit of measurement is) there is 1px on the other side. Then 1:2 so for every 1px there is 2px on the other side and 1:3, 1:4 ...etc.

The ratio you would like to have is a 1:1 ratio that is 100px * 100px.

But this cannot be forced from an image with another aspect ratio without distorting the image. Companies like facebook do this by either creating cropped versions of the image or giving it a background-size of cover.

My recommendation would be to create a div with a height and width of 100px and set the image as a background image as follows:

.divClass{
      background-repeat:no-repeat;
      background-size:cover;
      width:100px;
      height:100px;
}

Next add the following to your php code

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

This would allow the image to fill the div fully while keeping the aspect ratio. The downsides would be that some of the image would not be visible if the aspect ratio of the image is not 1:1 which is what you are trying to achieve. Also if you would like to change the position of the image you can use the background-position Property.

If you would like to be able to see the entire image you can add a popup box.

jQuery: How can I show an image popup onclick of the thumbnail?

Your final solution would be to crop the images or allow the user to crop the image before they upload. Below is a great plugin that allow this.

https://fengyuanchen.github.io/cropperjs/

Upvotes: 2

Dekel
Dekel

Reputation: 62536

If you want to force the width/height of the img element you can use :

img {
    width: 100px;
    height: 100px;
}

In case you are using some other libraries that override default css behavior you can use !important:

img {
    width: 100px !important;
    height: 100px !important;
}

The img-responsive class from bootstrap will set:

max-width: 100%;
height: auto;

To the image, and if you want a specific width/height - this is not what you are looking for.

Upvotes: 1

Related Questions