CSS Frage zu Padding-alternative

[Jontheriver]

Hi ihr Coder

ich hab da ein Bild dass ich gerne in der Höhe beschneiden will
einmal von oben um paar px und einmal von unten!

von unten klappt sieht so aus:

<div style="width:275px; height:48px; overflow:hidden; margin:1em;">
<img src="http://www.***.de/***.jpg">
</div>

allerdings hab ich 0 peil wie ich es von oben beschneiden soll, da padding-top keine negativen werte erlaubt
habt ihr ideen?

grüße
j

 

[krizzelfix]

Es gibt negative Padding Werte.
In deinem Fall würden Minus aber den Bereich, den dein Bild verwendt, vergrößern.

D.h. du müsstest positive Padding-Werte verwenden. Das bringt aber auch nichts, da der Wert sich nur auf Elemente Innerhalb des Bildes auswirkt. Da es das nicht gibt ist das überflüssig.

Dein Ansatz mit dem Overlow hidden ist schon richtig, nur musst du das Bild noch mittig Zentrieren, und die Höhenangabe etwas niedriger als das Bild machen.

 

[Jontheriver]

hmm ohne das jetzt auszuprobieren
wenn ich es mittig zentriere schneidet er dann nicht oben genauso viel ab wie unten durch die zentrierung?
weil das verhältniss is ca 1:10 oder so von dem was er abschneiden soll
also würde das mit zentrieren nicht klappen oder?

 

[muhkuher]

Nimm doch clip http://css-tricks.com/css-sprites-with-inline-images/

PS: Alternativ könntest du das Bild als Hintergrundbild eines div-Containers einsetzen und mit background-position entsprechend verschieben. Bzw. wenn das Bild in einem Container liegt, bekommt der Container overflow: hidden; und du positionierst das Bild dann über position: relative und left: -20px; und top: -30px;

<div class="image-container"><img src="pfad/zum/bild.jpg" alt="Ein Bild" /></div>

.image-container {
    height: 150px;
    overflow: hidden;
    position: relative; /* damit das position: absolute des kindelements greift */
    width: 200px;
}
.image-container img {
    left: -30px;
    position: absolute; /* absolut zum nächsten Elternelement, das wenigstens relativ positioniert ist */
    top: -20px;
}

Vermutlich reicht es sogar aus lediglich das img relativ zu positionieren, dann könnte das position: relative im div weg fallen.

 

[Jontheriver]

ha das mit clip hat schon 1a funktioniert.. danke
ich glaub ich werd mich mal ausgiebiger mit css beschäftigen
ist eig ein ganz interessantes werkzeug