How to crop images to make them all the same size

Question

I have an image gallery and want all the images to be the same size. Here is my CSS. I am following to this tutorial.

div.gallery {
  border: 1px solid #ccc;
}

div.gallery:hover {
  border: 1px solid #777;
}

div.gallery img {
  width: 100%;
  height: auto;
}

div.desc {
  padding: 15px;
  text-align: center;
}

* {
  box-sizing: border-box;
}

.responsive {
  padding: 0 6px;
  float: left;
  width: 24.99999%;
}

@media only screen and (max-width: 350px) {
  .responsive {
    width: 45.99999%;
    margin: 6px 0;
  }
}

@media only screen and (max-width: 250px) {
  .responsive {
    width: 25%;
  }
}

.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

And here is a visual representation of the problem. I want to crop the rocket for exemple.

you con set the image as background in a div with 'background-size: cover' and then make all div of the measure that you want — red, Jul 26 '19 at 16:07
How can i do that? do I add background-size: cover in div.gallery img? — J.C, Jul 26 '19 at 16:10
Provide your `HTML` in question and I will write the answer. — Andrew Vasylchuk, Jul 26 '19 at 17:58
You can find the css and html here https://www.w3schools.com/css/tryit.asp?filename=trycss_image_gallery_responsive — J.C, Jul 26 '19 at 18:55

score 0 · Answer 1 · answered Jul 26 '19 at 16:24

Take a look at ImageResizer.net. It has everything you need including code samples for SQL Server integration and croping with aspect ratio preserved:

http://imageresizing.net/

The most popular features are free and open-source:

Resizing, cropping, rotating, flipping
Borders, drop-shadows, padding, background colors
Adjustable Jpeg compression. Multi-page tiff viewing
Animated GIF frame selection. Comprehensive, real-time diagnostics
Basic GIF and PNG encoding
Gradient generation

I dont wish to pay for a license since my project is for business purposes. Is there a alternative open source software — J.C, Aug 03 '19 at 02:01

score 0 · Answer 2 · answered Jul 26 '19 at 16:30

use this for fixed size


.coverDiv {
    width: 150px; /* or what you want */
    height: 150px; /* or what you want */
    background-size: cover;
    background-repeat: no-repeat;
    background-color: #eee;
    background-position: center center;
}

or this for percentage


.coverDiv {
    width: 25%; /* or what you want */
    padding-bottom: 25%; /* or what you want */
    background-size: cover;
    background-repeat: no-repeat;
    background-color: #eee;
    background-position: center center;
}

and then with inline style add the image url as background

 <div class="coverDiv" style="background-image: url(YOUIMAGEURL);></div>

I like your idea but I dont know how to implemented it with my code — J.C, Aug 03 '19 at 02:31

score 0 · Answer 3 · answered Jul 26 '19 at 16:35

0

You have used the following in your css.

div.gallery img {
  width: 100%;
  height: auto;
}

Notice that the height is 'auto'. You can try fixing it to some constant value and see if it works. This is my best guess (without seeing the html file you have).

answered Jul 26 '19 at 16:35

Amit

2,018
1
8
12

I have change the height to a constant example 100px but then the image is deformed when i put a percentage instated nothing happens – J.C Jul 26 '19 at 16:43

How to crop images to make them all the same size

3 Answers3