How can I make images the make size in CSS?

Hi,

I'm trying to get image sizes to be all the same without resizing them in photoshop.   Can you help me?  

Go to http://marilynmesa.com.  You can see the images are different sizes.  I used 100w 100 height on css.

Here is html and css
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, width=device-width">
    <title>Marilyn Mesa Portfolio</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/style.css">
</head>

<body>
  <!--Page Content-->
    <header>
        <h1>Marilyn Mesa</h1>
        <p>I design and code front-end webpages.</p>
        <a href="hireme.html" class="btn">Hire Me</a>
    </header>
    <blockquote cite="https://en.wikipedia.org/wiki/Saul_Bass">
        <p>"Design is thinking made visible."</p>

     </blockquote>





    <div id="main" role="main" class="group">
    <section>
        <a href="zebra.html"> <img src="img/Zebra-life-website.png" alt="zebra"></a>
        <a href="zebra.html" class="btn">Demo</a>
        
          <h2></h2>

          <p></p>
          
          

    </section>
    <section>
      <a href="#"> <img src="img/voices4casa.png" alt="non-profit"></a>

          <h2> Non-Profit</h2>

          <p>WP Theme Customization & Consulting</p>

    </section>
     <section>

         <a href="#"><img src="img/Petsy-111.png" alt="placeholder"></a>

          <h2>Petsy Web Design</h2>

          <p>Mockup of Petsy in Photoshop</p>
    </section>
     </div>

      <footer id="credits">&copy; Marilyn Mesa</footer>

</body>
</html>

Here is Css
* body  {
    margin: 0;
    padding: 0;
} 


/* box-sizing applied*/

*{
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}


/* group class added to contain floats clearfix hack*/

.group:before,
.group:after {
    content:"";
    display: table;
}
.group:after {
    clear:both;
}
.group {
    zoom:1;
}

/*Mobile First Styling*/

body {
    font-family: Verdana, sans-serif;
    font-size: 100%;
    line-height: 1.5;

}

h1,h2 {
    font-family: Impact;
    line-height: 0.9;
    text-transform: uppercase;
    color: #222;

}

h1 {
    font-size: 6em;
    margin: 0;
}
h2 {
    font-size: 2em;
    text-align: center;
}

a {
    color: #f03;
    text-decoration: none;
}
a:hover {
    color: #444;
    text-decoration: underline;
}
a.btn {
    display: inline-block;
    text-transform: uppercase;
    background: #c1dbe3;
    color: white;
    margin: 1em;
    padding: 1em 2em;
    margin: auto;
    -webkit-border-radius: 0.5em;
    -moz-border-radius: 0.5em;
        border-radius: 0.5em;
}
a.btn:hover {
    background: #ff1493;
    text-decoration: none;
}
header {
    background: linear-gradient(#ffffff,#CCFFFF);
    padding: 8em 1em;
    text-align: center;
    border-top: 0.25em solid #ff1493;
}
header p {
    margin-bottom 4em;
}


blockquote {
  background: url(../img/cubes-677092.png) no-repeat center center fixed;
  background-size: cover;


}

blockquote {
   margin: 0;
   padding: 3em;
   font-family: georgia;
   font-size: 3.5em;
   text-align: center;
   color: white;
}

#main {
    margin: 2em;
}


section img {
    background: #e9e9e9;
    margin-top: 1.5em;
    width: 100%;
    -webkit-border-radius: 2em;
    -moz-border-radius: 2em;
        border-radius: 2em;
}

a.btn {
    display: inline-block;
    text-transform: uppercase;
    background: #8b008b;
    color: white;
    margin: 1em;
    padding: 1em 2em;
    margin: auto;
    -webkit-border-radius: 0.5em;
    -moz-border-radius: 0.5em;
        border-radius: 0.5em;
}
a.btn:hover {
    background: #ff1493;
    text-decoration: none;
}
section p {
  text-align: center;
}

.demo {
    display:inline-block;
    background: gray;
    border-radius: 0.5em;
}

footer#credits {
    text-align: center;
    background: #ff1493;
    color: white;
    padding: 2em;
}

footer#credits-1 {
    text-align: center;
    background: #ff1493;
    color: white;
    padding: 3em;

}

/*media queries for breakpoints*/
@media screen and (min-width: 800px )  {
  section {
    width: 30.714285714286%;
    margin-right: 3.928571428571%;
    float: left;
}
section:last-child {
  margin-right: 0;
}


}
@media screen and (max-width: 520px ){
  h1 {
    font-size: 46px;
  }
blockquote {
  font-size: 32px;
}
}

@media screen and (min-width: 1900px) {
    blockquote {
      background: ;
}
}

Open in new window

Marilyn MesaAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

mohan singhWeb developerCommented:
Use this css
.img {
    position: relative;
    float: left;
    width:  100px;
    height: 100px;
    background-position: 50% 50%;
    background-repeat:   no-repeat;
    background-size:     cover;
}

Open in new window

0
Julian HansenCommented:
What are you wanting here?

Your images are sized to fit the container (width: 100%) - they are not all the same proportion so their heights will be different.

If you make them all the same height and width they will distort.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Marilyn MesaAuthor Commented:
thanks
0
Marilyn MesaAuthor Commented:
Thanks, I might resize my images or crop them.
0
Julian HansenCommented:
You are welcome.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.