Bild abschneiden?

lisali

Erfahrenes Mitglied
Hey,

kann ich irgendwie ein Bild mit img-Tag (oder auch ohne...) höhenmäßig abschneiden? Ich möchte eine bestimmte width-Angabe machen und alles, was länger als eine vorgegebene Höhe hat, soll eben abgeschnitten und nicht angezeigt werden.

Achja... mir wäre auch wichtig, dass man darauf klicken kann - es also ein Link ist.
 
Ja, an overflow: hidden dachte ich auch, aber das geht ja nicht im <img>-Tag. Außerdem würde da ja nicht der "width-overflow" beachtet werden, sondern der gesamte. Und mir geht es ja darum, dass die Breite auf jeden Fall fest ist, jedoch bei der Höhe abgeschnitten wird. Und es sollte wie gesagt auch ein Link sein.

Was wäre da am empfehlenswertesten?
 
http://de.selfhtml.org/css/eigenschaften/anzeige/overflow.htm zeigt dir doch, wie's funktioniert - dort ist das Grafikelement in ein <div>-Element eingebettet, das entsprechend formatiert wird.

Da es sich um einen grafischen Verweis handelt, wendest du einfach die gewünschte Formatierung auf das umschliessende <a>-Element an.

Bedenke hierbei, dass dem Inline-Element zusätzlich "Block-Level-Charakteristika" verliehen werden muß, damit es eine Breiten-/Höhenangabe annimmt (display:block, oder eine float-Regel - je nachdem, was im Textfluß erwünscht ist).

Desweiteren gibt es overflow-x und overflow-y, um eine Unterscheidung für die beiden Achsen vorzunehmen.

mfg Maik
 
Zum besseren Verständnis wieder ein kleines Beispiel :)

HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
<meta name="author" content="Maik" />
<meta name="date" content="2010-06-03" />

<title>tutorials.de | Bild abschneiden?</title>

<style type="text/css">
/* <![CDATA[ */
a.block {
display:block;
height:100px;
overflow-y:hidden;
}
a.float {
float:left;
height:250px;
overflow-y:hidden;
}
a img {
border:none;
}
/* ]]> */
</style>

</head>
<body>

<p><a href="#" class="block"><img src="http://www.tutorials.de/forum/customprofilepics/profilepic31374_2.gif"></a></p>
<p><a href="#" class="float"><img src="http://www.tutorials.de/forum/customprofilepics/profilepic236450_1.gif"></a></p>

</body>
</html>


mfg Maik
 
Zurück