• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Bild verkleinern?!

Witschi262

Blogger
Hi,
ich möchte wegen einem Newssystem ein Bild verkleinern. Da da, jedes Bild eine andere höhe hat, kann das mal ganz schnell die Seite sprengen.

Wenn ich eine Feste breite, sowie Höhe angebe, wird das ganze Skaliert. Allerdings möchte ich, dass einfach zu viel Bild abgeschnitten wird.

Ist das möglich?
 
Werbung:
So könnte es gehen (nicht browserübergreifend getestet):

HTML:
<!DOCTYPE html>

<html lang="en">

    <head>
        <meta charset="utf-8" />
        <title>New</title>
    </head>

    <body>

        <div style="overflow: hidden; width: 300px; height: 300px; border: 10px solid #ccc;">
            <img src="http://imgs.xkcd.com/comics/permanence.png" />
        </div>

        <p>Bild von http://xkcd.com/</p>

    </body>

</html>

Ansonsten kannst du das Bild auch als background-image setzen.
 
Werbung:
hi,

Frage vorab..

wie groß sind die Unterschiede der Newsbilder?



Alternativ kann man das Newsbild als Hintergundbild nehmen.

Und die Box (div) wo dein Newsbild angezeigt wird bekommt einen festen wert.
 
Probiers mal mit clip:rect(oben rechts unten links)
HTML:
<div style="position: absolute; clip:rect(0px 300px 300px 0px);">
 <img src="http://www.domain.de/images/bild.jpg">
</div>
</span>
 
Zuletzt bearbeitet:
Werbung:
Werbung:
HTML:
<img src="bild.png" style="padding-left:5px; float:left;position: absolute; clip:rect(0px 114px 155px 0px)" />

Joar, mehr gibts nicht zu sagen ^^
 
HTML:
<div style="float:left;">
 <img src="bild.png" style="padding-left:5px; position:absolute; clip:rect(0px 114px 155px 0px);" />
</div>
 
Werbung:
Ich habe nur Chromium, da ist's okay. Aber, im Ernst, ich kann mir nicht denken, wieso ein Browser auf die Idee kommen sollte, dort zu skalieren. (Geht um den Code in #2.)

Edit: Na ja gut, eigentlich bräuchte nur das overflow: hidden ignoriert zu werden. Vielleicht doch nicht so unwahrscheinlich. (Und am Ende nach Spezifikation vielleicht gar richtig. ;)) Nichts gesagt.
 
Zurück
Oben