Bildgröße mit CSS ändern

    Hallo,

    ich würde gerne die Größe eines Bildes, dass ich mehrmals auf meinen Unterseiten nutze, verändern.

    Ich hatte es schon per HTML versucht <img src="https://www.example.com/.....png" width="30" height="30"/>

    aber das scheint nicht zu funktionieren. Im Prinzip muss ich doch "nur" das Bild ansprechen mit der URL

    und dann die Größe per width und height ändern?


    Danke für die Hilfe

    Kalle

    wie du das hast sollte es wohl gehen, aber ich denke mal das irgendwo in der css das überschrieben wird ,oder ein Javascript da noch drauf zugreift.Gib uns doch mal den Link dann können wir dir das auch genauer sagen.


    Es könnte auch sein das bootstrap( ohne M ) da drauf zugreift oder sonst was

    Hey,


    mache solche Angaben lieber über CSS.


    Wenn du jedem Bild die gleiche Größe geben willst kannst du jedem Bild eine Klasse geben. In der CSS File kannst du dann mittels .deineKlasse auf die Bilder zugreifen und verändern.


    Grüße,

    Stef

    Danke für die Rückmeldungen.

    Ordne ich dem Bild dann über HTML eine Klasse zu und setze dann mit CSS die Größe fest?

    Könnt Ihr mir ein Beispielcode geben wie dass dann auszusehen hat?

    Code
    <style>
.bildklasse{
    height:30px;
    width:30px;
}
</style>
<img class="bildklasse" href="link.de"  alt="nichtvergessen">

    das wahrs. Jedes Bild was genau so gross sein soll gibst du dann class="bildklasse" und dann geht das.


    <img brauch immer ein alt="" . WARUM ? Erstens damit der Code Valide ist, und zweitens kann man da ein Bildbeschreibung reinschreiben damit man was lesen kann was das für ein Bild ist, wenn das Bild mal nicht geladen werden kann

    Hi,


    ich hab nun folgendes gemacht, aber das Bild taucht bei mir ganz oben im Head-Bereich auf

    und die restlichen Bilder bleiben unverändert. Wenn ich das Bild-Element via Dev.Tools

    untersuche wird dort die Klasse: attachment-large size-large angezeigt. Die habe ich übernommen.

    Ich weiß nicht ob das alles so richtig ist?

    Hab über Custom CSS eigenen HTML-Ordner aufgemacht und das dann alles reingepackt.


    <style>

    .attachment-large size-large{

    height:30px;

    width:30px;

    }

    </style>

    <img class="attachment-large size-large" href="https://xxxxxxxxxxxxxxxg" alt="googleplay">

    genau und ich würde es mal so versuchen


    Code
    <style>
.size-large{
height:30px;
width:30px;
}
</style>
<img class="size-large" href="https://xxxxxxxxxxxxxxxg" alt="googleplay">

    ist aber nur nee vermutung. Weil wurde ja schon gesagt ohne Link und kompletten Code muß die Kristallkugel Ergebnisse bringen und die hat heute ein schlechten Tag weil kurz vor Weihnachten ist und ihre kleinen Kugel Kinder an den Tannebäume hängen

    Zitat von Kalle112

    Kann ich nicht mithilfe der Dev.Tools herausfinden welche Klasse das Bild hat und dies dann über CSS verändern?

    Ja, aber was bringt Dir das, wenn bestehende CSS-Regeln de höhere Prio haben?!

    Interessant für Dich ist dann in den DevTools zu sehen, welche CSS-Regel gewinnt. Entsprechend umbauen musst Du sie dann noch und gut is...

    Vielen Dank Basti das hat gepasst!

    Hätte noch eine andere Frage.

    Ich würde gerne den Maushover umstellen und zwar dass nicht der Ttiel der Bilder sondern z.B. die Beschreibung angezeigt wird.

    Ich nutze das Wordpress Theme Twenty Eleven. Wie kann ich das verändern?

    Hey,


    Kalle112 :


    Frag dich mal warum dein CSS Code nicht funktioniert hat?


    Dort ist ein Fehler bei der Klassenansprache enthalten. attachment-large size-large sind im HTML-Tag <img> 2 Klassen.



    Arne Drews : Genau.


    Grüße,

    Stef

    Also Kalle112 in deinen Fall hast du mehrere möglichkeiten


    Code
    .attachment-large.size-large{
.attachment-large{
.size-large{
.attachment-large,.size-large{// der ist eigentlich sinnlos

    img kannst du vor den Punkt auch noch da vor machen, und weitere Klassen und Co.

    Aber um das genau sagen zu können fehlt uns noch was. Deswegen können wir dir so erst nur die möglichkeiten zeigen

Jetzt mitmachen!

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

Benutzerkonto erstellen Anmelden