Bildgröße mit CSS ändern

  • Nö, warum?


    Mit .attachment-large.size-large selektiert er <img class="attachment-large size-large" problemlos.

    Ja? Sowas habe ich noch nie gesehen. Aber für was soll man da 2 Klassen selektieren wenn man schon mit 1 Klasse es ändern kann ? Die beide Klassen haben bestimmt eine andere Funktion. Dann wäre es doch ziemlich unpraktisch beide in CSS zu selektieren.

  • Joa, das mag bei ihm so sein, aber ich arbeite sehr oft auch auf diese Weise.

    Bspw. wenn viele Container sich nur in wenigen Regeln unterscheiden, dann haben die bei mir meist zwei Klassen.

    HTML
    <div class="details default">
        ...
    </div>
    
    <div class="details highlight">
        ...
    </div>
    CSS
    .details { display:flex; border:1px solid #ccc; color:#000; }
    .details.default { color:#999; }
    .details.highlight { text-decoration:underline; color:#f00; }

    nur als Beispiel, kann man natürlich auch anders lösen...

  • Die Bilder, die ich nun verändert habe, waren über einen PageBuilder mit der Größe "large" eingestellt, daher auch der Klassenname attachment-large size-larg

    Nun habe ich einige Bilder individuell auf eine Größe gebracht (z.B. 130 x 40). In den Dev.Tools haben diese Bilder nun keine Klasse mehr, sondern es werden dort nur "title" und "alt" angezeigt. Wieso ist das so?

  • Zeig uns doch mal den Link zur Seite. Wie oft den noch ?

    Die Kristall Kugel kann nicht mehr, die ist schon stinkig weil sie Weihnachts deprisionen hat.


    Wenn du Hilfe haben willst brauchen wir den Link ?

    WARUM brauchen wir Link? Da jeder Code anders programmiert ist und jeder Fehler ist anders.Auch wenn die Leute hier viel ahnung haben können wir zwar gut raten ,aber eine 100% Sicherheit ist es nicht.

    Willst du eine richtige Antwort haben brauchen wir den Link zur Seite.

    Willst du den Link nicht rausgeben kannst du deinen Fehlerhaften Code bei Codepen reinmachen und uns dann den Link geben.

  • Ja wie schon gesagt wurde wird das ohne Link zur Seite jetzt schwer.

    Das mit Codepen wäre eigentlich einfach, da mußt du den Quelltext reinkopieren. Da du WP benutzt funktioniert das nicht so einfach weil WP sein eigen leben hat und im Quelltext andere Sachen ankommen als man vermutet.


    Du könntest höchstens versuchen den Fehler nach zustellen bei Codepen ,doch das wirst du wahrscheinlch nicht hin bekommen.


    Du könntest dir jetzt noch einen free Hoster suchen wo du die Seite hochladen kannst. Dann hast du einen ganz anderen Link und den Inhalt kannst du ja vorher noch verändern ,falls du deswegen den Link nicht posten wolltest

  • Ja ich weiß ohne Link ist sehr ungünstig, sorry.

    Kann man die Bilder eigentlich auch nur mit CSS einstellen?

    Also ungefähr so:


    .attachment-large.size-large{

    height:33px;

    width:130px;

    url(https://....)

    }


    Die Klasse kennt man ja schon. Lässt die sich auch über CSS ansprechen

    oder muss das alles in HTML eingebettet werden?

  • Wenn dann so

    Code
    <style>
    .attachment-large.size-large{
    height:33px;
    width:130px;
    background:url(https://....);
    }
    </style>
    <div class="attachment-large"></div>



    An besten wäre noch ein Figure Tag mit figcaption. Dann könntest du du auch deine Texte zu den Bild hinzufügen.Das wäre dann so zb

    Code
    <figure>
      <img src="pic_trulli.jpg" alt="Tbla">
      <figcaption>irgendwelchen text den man auch mit hover einblenden kann</figcaption>
    </figure>
  • Ich versteh nicht so ganz warum alles in HTML eingebettet ist. Wieso kann ich nicht den Klassennamen mit

    den Größenveränderungen in ein Custom CSS Sheet reinpacken?

    Einfach nur so:


    .attachment-large.size-large{

    height:33px;

    width:130px;

    url(.....).

    }


    Die Klasse ist doch schon vordefiniert - > siehe Dev.Tools?

  • was ist den daran nicht zu verstehen

    Wenn dann so

    Code
    <style>
    .attachment-large.size-large{
    height:33px;
    width:130px;
    background:url(https://....);
    }
    </style>
    <div class="attachment-large"></div>


    Mein div ist dein ??? was immer du da auch genommen hast

  • Ja ich verstehe schon, aber wieso HTML. Wenn ich beispielsweise meine Seite responsive machen möchte, dann tue

    ich das in CSS über die @media queries und bette den Code nicht in HTML ein. Oder habe ich da einen falschen Gedankengang?

  • meinst du das

    Code
    <style>
    .attachment-large.size-large{
    height:33px;
    width:130px;
    background:url(https://....);
    }
    </style>

    Das <style></style> kannst du auch weg machen und den Code mit in deiner vohandener Css mit rein Kopieren.

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!