How can I best resize images when pngs are not all the same size?

Question

I'm making a layout for a group of text and images using Foundation. I've exported pngs from photoshop. Visually in photoshop the image look like they will be contained nicely in square boxes within a layout of divs. However when I put them in that layout one of the images appears larger than the others visually. Is Photoshop saving these images at their original size, not what the designer has resized them to on the layout? What is the best practice to get the images to look visually the same size on the page?

Do I re-size and re-save the image trying and repeating until it looks right in the layout? I have about four images. Should I give them all a separate class and assign a unique width so that they appear correctly on the screen? Doing that makes the images sometimes appear fuzzy? I'm not sure if I will encounter this when re-size/re-saving them in photoshop. Please let me know if this question is better suited for graphicdesign.stackexchange. It sort of straddles the two sites in my opinion

structure:

div  class="media-object"
  div class="media-object-section middle
    img

div  class="media-object"
  div class="media-object-section middle
    img

div  class="media-object"
  div class="media-object-section middle
    img

div  class="media-object"
  div class="media-object-section middle
    img

Have you tried setting `width` and `height` attributes (or CSS values) on the images? They're technically required for the browser to render the page appropriately! — Niet the Dark Absol, Jul 28 '16 at 20:15
@NiettheDarkAbsol Thanks. Can you be more specific about how this could use this to solve my issue? — 1252748, Jul 28 '16 at 20:25

score 0 · Answer 1 · edited May 23 '17 at 12:14

May I suggest you use background-image and background-size: cover. That will ensure that no matter the image is wider or higher, it will always fill the div, all rendered in the same visual size, with its aspect ratio kept.

This can be done with the img element too, though as its browser support is less good, I chose not to.

html, body {
  margin: 0;
  width: 100vw;
}
.media-object {
  display: flex;
  flex-wrap: wrap;
}

.media-object-section {
  width: calc(25vw - 4px);     /*  4px equal margin on each side  */
  height: calc(25vw - 4px);
  margin: 2px;
  background-size: cover;
  background-position: center;
}

.media-object-section.img1 {
  background-image: url('http://lorempixel.com/200/200/animals/1');
}
.media-object-section.img2 {
  background-image: url('http://lorempixel.com/300/200/animals/2');
}
.media-object-section.img3 {
  background-image: url('http://lorempixel.com/200/300/animals/3');
}
.media-object-section.img4 {
  background-image: url('http://lorempixel.com/400/400/animals/4');
}

<div class="media-object">
  <div class="media-object-section middle img1">
  </div>
  <div class="media-object-section middle img2">
  </div>
  <div class="media-object-section middle img3">
  </div>
  <div class="media-object-section middle img4">
  </div>
  <div class="media-object-section middle img2">
  </div>
  <div class="media-object-section middle img3">
  </div>
  <div class="media-object-section middle img4">
  </div>
  <div class="media-object-section middle img1">
  </div>
</div>

Update based on comment

Here is a none flex solution

html, body {
  margin: 0;
  width: 100vw;
}
.media-object-section {
  display: inline-block;
  width: calc(25vw - 4px);     /*  4px margin on eachside  */
  height: calc(25vw - 4px);
  margin: 2px -2px -2px 2px;   /*  -2px to compensate for white-space  */
  background-size: cover;
  background-position: center;
}

.media-object-section.img1 {
  background-image: url('http://lorempixel.com/200/200/animals/1');
}
.media-object-section.img2 {
  background-image: url('http://lorempixel.com/300/200/animals/2');
}
.media-object-section.img3 {
  background-image: url('http://lorempixel.com/200/300/animals/3');
}
.media-object-section.img4 {
  background-image: url('http://lorempixel.com/400/400/animals/4');
}

<div class="media-object">
  <div class="media-object-section middle img1">
  </div>
  <div class="media-object-section middle img2">
  </div>
  <div class="media-object-section middle img3">
  </div>
  <div class="media-object-section middle img4">
  </div>
  <div class="media-object-section middle img2">
  </div>
  <div class="media-object-section middle img3">
  </div>
  <div class="media-object-section middle img4">
  </div>
  <div class="media-object-section middle img1">
  </div>
</div>

Note: The -2px to compensate for white-space can be solved other ways. Check this post for more info

@1252748 No, `flex` is just used to lay out the image elements — Asons, Jul 29 '16 at 15:25
@TimTroiano I see that at the exact same time you deleted your answer, mine got downvoted, so may I ask if you down voted mine? ... and only so you know, I didn't down vote yours — Asons, Aug 03 '16 at 21:14

How can I best resize images when pngs are not all the same size?

1 Answers1