CODEWITHSUNDEEP
htmlcss
Cooper
Cooper

Reputation: 45

How to make image resize itself when the browser reaches a specific width?

I have centered an image and made it a specific height and width, but when the browser dimension size is about 500px (in width), I would like the image to start resizing itself to fit the screen so scrolling is not necessary. How do I do this?

I will include all my code for the entire webpage in case this makes a difference.

@charset "utf-8";

/* CSS Document */

body {
  background-color: white;
  padding: 0px;
  margin: 0px;
}
#menu {
  font-size: 15px;
  font-family: "Gadugi";
  color: white;
}
span {
  color: #989797;
}
#nav {
  position: absolute;
  top: 100px;
  height: 45px;
  width: 100%;
  background-color: black;
  z-index: -100;
  text-align: center;
}
#menu ul {
  height: auto;
  padding: 8px 0px;
  padding-top: 13px;
  margin: 0px;
}
#menu li {
  /*padding between words */
  display: inline;
  padding: 15px;
}
#logo {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 33em;
  padding-top: 2px;
  z-index: -100;
  padding-left: 4px;
}
#home {
  color: #26C6E7;
}
.container {
  height: 500px;
  width: 850px;
  overflow: hidden;
  position: absolute;
  margin-top: 80px;
  margin-left: auto;
  margin-right: auto;
  left: 0;
  right: 0;
}
.photo {
  position: absolute;
  animation: round 16s infinite;
  opacity: 0;
  height: 500px;
  width: 850px;
  min-width: 500px;
}
#orange {
  background-image: url(images/pacman.jpg);
  width: 100%;
  height: 100%;
  padding-top: 80px;
  position: absolute;
  z-index: -99999999999999999999999999;
  background-size: cover;
  background-repeat: repeat-y;
}
@keyframes round {
  25% {
    opacity: 1;
  }
  40% {
    opacity: 0;
  }
}
img:nth-child(4) {
  animation-delay: 0s;
}
img:nth-child(3) {
  animation-delay: 4s;
}
img:nth-child(2) {
  animation-delay: 8s;
}
img:nth-child(1) {
  animation-delay: 12s;
}
a {
  text-decoration: none;
  color: white;
  font-weight: bold;
  z-index: 100;
}
a:hover {
  color: #26C6E7;
}
<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <title>Home - CooperTimewell.com</title>
  <meta name="description" content="This is where the description is suppose to be." />
  <link href="stylesheet.css" rel="stylesheet" type="text/css" />
  <link href="images/anime.ico" rel="icon" type="image/x-icon" />
</head>

<body>
  <div id="nav">
    <div id="menu">
      <ul>
        <li id="home"><a href="http://www.coopertimewell.com"><span>HOME</span></a>
        </li>
        <li><a href="http://www.coopertimewell.com/thecoopertimes">THE COOPER TIMES</a>
        </li>
        <li><a href="http://www.coopertimewell.com/about">ABOUT ME</a>
        </li>
        <li><a href="http://www.coopertimewell.com/contact">CONTACT</a>
        </li>
        <li><a href="http://www.coopertimewell.com/games">GAMES</a>
        </li>
      </ul>
    </div>
  </div>
  <a href="http://www.coopertimewell.com">
    <img id="logo" src="images/logo.png" />
  </a>
  <div id="orange"></div>

  <div class="container">
    <img class='photo' src="images/slide1test.png" alt="" />
    <img class='photo' src="images/slide1test.png" alt="" />
    <img class='photo' src="images/slide1test.png" alt="" />
    <img class='photo' src="images/slide1test.png" alt="" />

  </div>

</body>

</html>

Upvotes: 0

Views: 520

Answers (1)

msfoster
msfoster

Reputation: 2572

You can do this with CSS media queries

@media (max-width: 500px) {
  .container, .photo {
    width: 100%;
  }
}

Upvotes: 1

Related Questions