Make all images the same size, CSS

1

Hello everyone, I am trying to write a css/html rule that will make all images on my page the same size, not matter the file size/resolution. And still remain mobile responsive.
I’ve tried everything I can think of, to do this and they still won’t size properly.
Thanks in advance for your help.

2

Hey, this depends somewhat on how you create your overall layout. (e.g. do you use flexbox, grid, bootstrap, etc.) Could you show us your code? (maybe a codepen or jsfiddle)

Very simply you can do this:
image

Unless some images are smaller than the container …

image

1 Like
3 
 return (
          
              <section className="fl w-50 w-25-l link overflow-hidden" key={serviceitems.title}>
              
              <div className="servicebox">
                <img src={serviceitems.image} alt={serviceitems.title}   className=" serviceimage"></img>
            </div>
                <h5 className="servicetitle" >{serviceitems.title}</h5>
                <p id={serviceitems.description} className=" servicedesc" >{serviceitems.description}</p>
                <p  className=" serviceprice">${serviceitems.price}</p>
                <p id ={serviceitems.amount} className=" serviceamount">Duration:{serviceitems.amount} week(s)</p>
                <button name={serviceitems.title} id= {serviceitems.image} value={serviceitems.price} className="button " >Add to cart</button>
                <Collapsible trigger={<p className="readmore">Read more</p>}>{serviceitems.fulldescription} </Collapsible>
               
                
              </section>
           
      );
    });
  } else return <h1>Loading...</h1>;

    return (
      <div>
     <h1 className="servicestitle">Some services I offer</h1> 
      <div className="container">

<div className="col-sm">
  <div className="row">
   {serviceitems}
        </div>
      </div>
   </div>
   </div>
    );
  }
}

export default Services;

This is what my code looks like. The problem is the user will be uploading many different photos that will need to have the same size and same css rule.

4

What did you expect to happen? What happened instead?

From this, no conclusive answer can be given, since we can not know what the classes on the section do, nor what happens outside of the section.

It is common for a content managment system to downscale and/or clip images uploaded by users. How about implementing such a functionality?

5

So the images are all their original sizes. So some are way too large, others too small, etc.
I am not using a content managing system. I am just having the user put them into a folder. So i need to have the rule on my end

6

I see. Do you have a sketch of the layout you are trying to implement?

1 Like
7

The col-sm bootstrap grid. (example here: https://getbootstrap.com/docs/4.0/layout/grid/)
I would just like the images to not overflow their containers.
Would I set this in the HTML or the css?

8

1
11493×787 401 KB
Just in case I am not being clear. This is what I mean, I’d like to have all of them stretch to be the same size.

9

via the class .img-fluid

You could require a certain minimum width, when your users upload the files.

1 Like
10

Good idea, thank you! So I added the img-fluid className to it. It looks better however they are still a little differently shaped.
Is there a way to make them all the same height? without hardcoding it as height=“400px” for instance

11

I can think of object-fit: cover; though I am not sure what bootstrap as to offer in that regard or how these two interfere. https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit

1 Like
12

Thanks for pointing me in the right direction!