Best way to size images?

HTML & CSS
1

Hello. I am looking to lay out a grid of images for either a menu or later for a photo gallery.

I’m trying to figure out how to make disparate images work together.

I guess this is less of an issue if I use Flexbox?

In general, is it better to size images - using CSS - and make the widths all the same, or should I make the heights all the same?

And are there any other considerations that I should make with Flexbox to make things work out the best?

2

Hi there UpstateLeafPeeper,

The question is, and only you can answer it,
is how do you want the images to look?

coothead

3

The best solution for someone else might be lousy for you.

4

I was working on a photo gallery in the past and am trying to remember what I did.

It seems to me that what I did was create wrapper DIV’s that were of a set size, and then the img went inside.

The benefit of that approach, was that regardless of whether an image was portrait or landscape, you had the same size wrappers which made things flow consistently in the Flexbox.

How does that sound?

Of course, if you have mixed photos that are landscape and portrait, then one type of image will suffer in that it will seem smaller with the approach I mention.

Any more thoughts?

5

Hi there UpstateLeafPeeper,

here is a basic flex layout…

<!DOCTYPE HTML>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<base href="https://picsum.photos/id/">

<title>Untitled document</title>

<!--
The internal CSS should be transferred to an external file
<link rel="stylesheet" href="screen.css" media="screen">
-->

<style media="screen">
body {
    background-color: #f0f0f0;
    font: normal 1em / 1.62em sans-serif;
 } 

#gallery{
 	display: flex;
 	flex-wrap: wrap;
 	justify-content: space-around;
 	padding: 0.25em;
 	border: 1px solid #999;
 	background-color: #fff;
 }

#gallery > li {
    width: 32%;
    padding: 1em; 
    margin: 0.5em 0;
 	box-sizing: border-box;
 	list-style: none;
 	background-color: #dfefff;
 }

#gallery img {
	display: block;
	width: 100%;
	height: auto;
}

@media ( max-width: 50em ) {
#gallery > li {
    width: 48%;
  }
 }

@media ( max-width: 30em ) {
#gallery > li {
    width: 98%;
  }
 }
</style>

</head>
<body>

<ul id="gallery">
 <li><img src="11/648/400.jpg" alt=""></li>
 <li><img src="18/400/500.jpg" alt=""></li>
 <li><img src="17/648/400.jpg" alt=""></li>
 <li><img src="19/400/480.jpg" alt=""></li>
 <li><img src="15/648/400.jpg" alt=""></li>
 <li><img src="13/400/520.jpg" alt=""></li>
 <li><img src="21/648/400.jpg" alt=""></li>
 <li><img src="28/400/500.jpg" alt=""></li>
 <li><img src="27/648/400.jpg" alt=""></li>
 <li><img src="29/400/480.jpg" alt=""></li>
 <li><img src="25/648/400.jpg" alt=""></li>
 <li><img src="23/400/520.jpg" alt=""></li>
</ul>
</body>
</html>

coothead

1 Like
6

@coothead,

You’re amazing!

Am in the middle of fixing my other problems first, but running your code, it appears that you validated my last comments about making a wrapper class for images so that each one has the same size and shape “footprint”.

Will do a deeper dive on your code in a while.

Nice photos too! :slight_smile:

7

@coothead,

Handy code.

Are you sure your media queries are right?

8

No, I am sure that my media queries are flexible. :rofl:

#gallery{
 	display: flex;

coothead

9

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.