Ankündigung

Einklappen
Keine Ankündigung bisher.

Bilder, richtige "size".

Einklappen

Neue Werbung 2019

Einklappen
X
Einklappen
  • Seite von 1
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge
Vorherige Weiter
  • #1

    Bilder, richtige "size".

    Hallo, es geht um Bilder.
    Kann, muss, wenn "JA", nach unter welche Bedingungen Webbrouser Breite und Höhe vom Bild selbst anpassen ?
    Ich hatte falsche JS-Datei Einbindung in HTML:, zuerst <script> danach <html>, <head> und es war kein Problem mit
    HTML-Code:
      <img style="width:300; float:right;margin:30 0 10 10; border:3px solid; clear:right;" src="img/rock-3.jpg"/>
    Brouser hat genau 300px selbst getan, alles OK.
    Dann habe ich JS Datei weggeworfen (das ist script für Popwindow, keine Verbindung mit Bilder).,
    und gesamte Seite ist kaputt, Bild ist 5-8 mal gewachsen.....
    Woran kann das liegen (außer meine Dummheit) ?
    P.S.
    Wenn ich JS Datei wieder einfüge, wird alles mit Bilder in Ordnung.
    Stichworte: -
  • #2
    width: 300 ist kein gültiges CSS. Davon abgesehen gehören solche Sachen in eine CSS-Datei und nicht in den HTML-Code. Dein HTML-Code ist übrigens auch kaputt. Bei <img> fehlt das alt-Attribut. Und wer weiß was noch alles bei deinem HTML-Code kaputt ist, den man hier nicht sieht. Jage mal den kompletten HTML-Code durch den W3C-Validator und behebe alle dort genannten Fehler.
    • 1 Likes

    Kommentar

    • #3
      Hmm, erstens, vielen Dank.
      Zweitens, habe korrigiert :
      HTML-Code:
      <img style="width:300px; float:right;margin: 30px 0 10px 10px; border:3px solid; clear:right;"    src="img/rock-3.jpg" alt="Was is das?"/>
      Funktioniert richtig !!!!
      Drittens: "gehören solche Sachen in eine CSS-Datei und nicht in den HTML-Code"
      Ich denke das ist kein Fehler, oder?
      Wenn nein (erlaubt, kein Fehler), dann gibt es ein Problem.
      In Projekt habe schon ca. 15 PHP files, Natürlich gibt es CSS Datei, klar für Bilder schreibe ich in CSS-Datei;
      aber wenn alles, inklusive Kleinigkeiten etwa
      HTML-Code:
      <span style=" font-style:oblique; font-weight:600; color:#900"> J. Lennon, R.Blackmore, J.Page, T. Jommi, J.Andersson, R. Wakeman, J.Hendrix, E. Clapton</span>
      ,
      befindet sich in CSS-Datei, dann wird CSS-Datei(en ?) unübersichtlich.
      Was meinen Sie?

      Kommentar

      • #4
        Wenn du die CSS Datei sauber strukturierst bleibt sie auch uebersichtlich.

        Kommentar

        • #5
          Zuletzt geändert von kaminbausatz; 14.05.2019, 06:36.
          Die Breite und Höhe eines Bildes wird automatisch angepasst, wenn Du dem Bild eine Breite (width) von 100% gibst.

          Andere Varianten sind eine furchtbare Frickelei.

          Ein Beispiel:

          HTML-Code:
          <!DOCTYPE html>
<html lang=de>
  <meta charset=UTF-8>
  <title>responsive Bilder</title>
  <style>
    figure{
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
      grid-gap: 1.5rem;
      max-width:1000px;
      margin: 0 auto
    }
    figure>img{width:100%}
  </style>
  <figure>
    <img src=https://loremflickr.com/800/600/Cologne alt=loremPic>
    <img src=https://loremflickr.com/800/600/Bonn alt=loremPic>
    <img src=https://loremflickr.com/800/600/Paris alt=loremPic>
    <img src=https://loremflickr.com/800/600/London alt=loremPic>
    <img src=https://loremflickr.com/800/600/Prag alt=loremPic>
    <img src=https://loremflickr.com/800/600/Budapest alt=loremPic>
  </figure>
          • 2 Likes

          Kommentar

          • #6
            Zitat von Vlad88 Beitrag anzeigen
            H
            HTML-Code:
            <img style="width:300px; float:right;margin: 30px 0 10px 10px; border:3px solid; clear:right;" src="img/rock-3.jpg" alt="Was is das?"/>
            (..)
            befindet sich in CSS-Datei, dann wird CSS-Datei(en ?) unübersichtlich.
            Was meinen Sie?
            nein, kann man import nutzen, oder gleich sass; eine saubere struktur macht vieles einfacher.

            nebenbei (weil scheinbar übeerlesen):

            img width -> ja
            img style width -> nein

            Die Breite und Höhe eines Bildes wird automatisch angepasst, wenn Du dem Bild eine Breite (width) von 100% gibst.
            oder max width und max hight angibst, die coloum eiens grid füllen lässt etc pp.

            • 1 Likes

            Kommentar

            • #7
              Zitat von tomBuilder Beitrag anzeigen
              oder max-width und max-height angibst
              Auflösung des Bildes größer als Darstellungsbreite oder Darstellungshöhe ? ja : nein
              • 1 Likes

              Kommentar

              • #8
                Ok, DANKE, muss lernen, was CSS3 betrifft.

                Kommentar

                Vorherige Weiter
                Lädt...
                X