Wie kann man die Größe von Bildern proportional/skaliert mit CSS für ein ansprechendes Webdesign anpassen

Source Code: (back to article)

<!DOCTYPE html>
<html>
  <head>
    <title>Responsive Resized Image in a Web Page</title>
    <style>
      * {
      box-sizing: border-box;
      }
      html {
      font-family: "Lucida Sans", sans-serif;
      }
      img {
      width: 100%;
      height: auto;
      }
      .row:after {
      content: "";
      clear: both;
      display: table;
      }
      .menu, .content {
      float: left;
      padding: 15px;
      width: 100%;
      }
      @media only screen and (min-width: 600px) {
      .menu {width: 25%;}
      .content {width: 75%;}
      }
      @media only screen and (min-width: 768px) {
      .menu {width: 20%;}
      .content {width: 79%;}
      }
      .header {
      background-color: #1c87c9;
      color: #ffffff;
      padding: 10px;
      text-align: center;
      }
      .menu ul {
      list-style-type: none;
      margin: 0;
      padding: 0;
      }
      .menu li {
      padding: 8px;
      margin-bottom: 7px;
      background-color :#666666;
      color: #ffffff;
      box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
      }
      .menu li:hover {
      background-color: #1c87c9;
      }
      .footer {
      background-color: #1c87c9;
      color: #ffffff;
      text-align: center;
      font-size: 12px;
      padding: 15px;
      }
    </style>
  </head>
  <body>
    <div class="header">
      <h1>W3DOCS</h1>
    </div>
    <div class="row">
      <div class="menu">
        <ul>
          <li>Books</li>
          <li>Snippets</li>
          <li>Quizzes</li>
          <li>Tools</li>
        </ul>
      </div>
      <div class="content">
        <h2>About Us</h2>
        <p>W3docs provides free learning materials for programming languages like HTML, CSS, Java Script, PHP etc.</p>
        <p>It was founded in 2012 and has been increasingly gaining popularity and spreading among both beginners and professionals who want to enhance their programming skills.</p>
        <img src="/uploads/media/default/0001/02/8070c999efd1a155ad843379a5508d16f544aeaf.jpeg" alt="Team Work"/>
      </div>
    </div>
    <div class="footer">
      <p>Resize the browser window to see how the content respond to the resizing.</p>
    </div>
  </body>
</html>