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

Einer der wichtigen Bestandteile des reaktionsschnellen Webdesigns ist die automatische Größenänderung des Bildes, um es an die Breite des Containers anzupassen. Weil die Menschen heutzutage verschiedene Typen von Desktops verwenden und unsere Webseiten für alle Arten von Bildschirmen geeignet sein sollen.

Also, lassen Sie uns 3 Möglichkeiten erklären, wie man die Größe von Bildern ändert und reaktionsschnelle Bilder nur mit HTML und CSS erstellt.

Bildgröße mit HTML-Attributen width und height ändern

Verwenden Sie die Attributu width and height für das Tag <img> , um die Breite und Höhe des Bildes zu definieren. Ein Beispiel ansehen:

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
  </head>
  <body>
    <p>Resized image:</p>
    <img src="/uploads/media/default/0001/01/25acddb3da54207bc6beb5838f65f022feaa81d7.jpeg" alt="Aleq" width="160" height="145"/>
    <p>Originalbildgröße:</p>
    <img src="/uploads/media/default/0001/01/25acddb3da54207bc6beb5838f65f022feaa81d7.jpeg" alt="Aleq"/>
  </body>
</html>
Bei der Größenänderung eines Bildes muss das Seitenverhältnis (der sichtbare Bereich und die Form der Anzeige) beibehalten werden. Andernfalls kann das Bild verzerrt werden und eine gewisse Qualität des Bildes verlieren.

Bildgröße mit CSS-Eigenschaften width und height ändern

Eine weitere Möglichkeit, die Größe von Bildern zu ändern, besteht über die CSS-Eigenschaften width und height. Stellen Sie die Eigenschaft width auf einen Prozentwert und height auf "auto" ein. Das Bild wird reaktionsschnell sein und wird nach oben und unten skaliert.

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Responsive Resized Image</title>
    <style>
      img {
      width: 100%;
      height: auto;
      }
    </style>
  </head>
  <body>
    <h2>Responsive Resized Image</h2>
    <p>Ändern Sie die Größe des Browsers, um den Response-Effekt zu sehen:</p>
    <img src="/uploads/media/default/0001/03/5bfad15a7fd24d448a48605baf52655a5bbe5a71.jpeg" alt="New York"/>
  </body>
</html>
Beachten Sie bitte, dass das Bild möglicherweise größer als die Originalgröße skaliert werden kann. In mehreren Fällen ist es besser, die Eigenschaft max-width lternativ zu verwenden.

Ändern der Bildgröße mit CSS-Eigenschaft max-width

Es gibt eine bessere Möglichkeit, die Größe von Bildern wie folgt anzupassen. Wenn die Eigenschaft max-width gesetzt ist, wird das Bild verkleinert, wenn es muss, aber nie vergrößert, um größer als seine ursprüngliche Größe zu sein. Der Trick ist, die Höhe zu verwenden: automatisch, um alle bereits vorhandenen Attribute height= "..." auf dem Bild zu überschreiben.

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Responsive Resized Image mit max-width</title>
    <style>
      img {
      max-width:100%;
      height: auto;
      }
    </style>
  </head>
  <body>
    <h2>Responsive Resized Image with max-width</h2>
    <p>Ändern Sie die Größe des Browsers, um den Response-Effekt zu sehen:</p>
    <img src="/uploads/media/default/0001/03/5bfad15a7fd24d448a48605baf52655a5bbe5a71.jpeg" alt="New York"/>
  </body>
</html>

Ein weiteres Beispiel für eine Live-Webseite, die diese Methode verwendet:

Beispiel

<!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>