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?
 
Julian HansenConnect With a Mentor Commented:
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
 
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
 
Marilyn MesaAuthor Commented:
thanks
0
 
Marilyn MesaAuthor Commented:
Thanks, I might resize my images or crop them.
0
 
Julian HansenCommented:
You are welcome.
0
All Courses

From novice to tech pro — start learning today.