[HTML][CSS] Jak obciąć poziomo po równo boki obrazka? Opcje

[pawelooss]

Witam!

Mam taki kod, który zabezpiecza obrazki, by nie zajmowały szerokości większej niż 50 pikseli.
Przypuśćmy, że znalazł się tam obrazek, który ma szerokość 70 pikseli. Zostanie on więc obcięty o 20 pikseli z prawej.

[HTML] pobierz, plaintext 
<div style="width: 50px; overflow: hidden;"><img src="mojobrazek.gif" alt="70 pikseli szerokosci" /></div>
[HTML] pobierz, plaintext 

W związku z tym mam pytanie: czy można ten obrazek jakoś "wycentrować" w tym obcinającym DIV-ie?

Innymi słowy jaki kod obcinałby go po równo o 10 pikseli z lewej strony i o 10 pikseli z prawej?


Z góry dziękuję za odpowiedzi! Każdą pomocną nagrodzę punktem "Pomógł".


Pozdrawiam,
pawelooss

[sadistic_son]

Nie moge sprawdzic teraz, dlatego glowy nie daje ale sprawdz tak:

[HTML] pobierz, plaintext 
<div style="width: 50px; overflow: hidden;"><img style="margin:0 auto;" src="mojobrazek.gif" alt="70 pikseli szerokosci" /></div>
[HTML] pobierz, plaintext 

[pawelooss]

Aha, kodu obrazka raczej nie chciałbym modyfikować, ewentualnie prosiłbym się więc posiłkować dodatkowym DIV-em. Ale jakby co, to proszę podawać wszelkie rozwiązania.

[HTML] pobierz, plaintext 
<div style="width: 50px; overflow: hidden;"><div style="margin:0 auto;"><img src="mojobrazek.gif" alt="70 pikseli szerokosci" /></div></div>
[HTML] pobierz, plaintext 

Próbowałem już powyższego, ale działało wyłącznie, gdy obrazek był mniejszy od 50 pikseli (czyli gdy naprawdę centrowało).

Ma ktoś jakiś inny pomysł? ;> Z góry dzięki.

[Kyle]

Obrazki centruje się jak tekst więc powinno zadziałać:

[HTML] pobierz, plaintext 
<div style="width: 50px; overflow: hidden; text-align: center;"><img src="mojobrazek.gif" alt="70 pikseli szerokosci" /></div>
[HTML] pobierz, plaintext 

Chyba...

[pawelooss]

Tak, tylko to nie jest zwykłe centrowanie, że mamy obrazek i marginesy, dzięki czemu możemy go sobie swobodnie ustawiać, lecz ten obrazek nie dość, że ich nie ma, to jeszcze jest ucinany tylko z prawej strony.


Gdyby to było takie proste jak jakieś "align: center;", to bym tego ani tu nie wstawiał. ;]


Somebody else?

[celbarowicz]

ściągnij darmowy program do kadrowania fotek=>JPEGrops i kombinuj ręcznie

<?php

echo '<div>';
echo '<img src="olek.jpg" style="width:50px;height:50px;" />';
echo '<div>';

?>

[muniekw]

Jak zrobisz sobie coś takiego:

[HTML] pobierz, plaintext 
<div class="obetnij">
        <img src="mojobrazek.jpg" alt="70 pikseli szerokosci" /> 
      </div>
[HTML] pobierz, plaintext 

i dorzucisz takie style:

[HTML] pobierz, plaintext 
.obetnij{
 width: 50px;
 height: 50px;
 overflow: hidden;
}
 
.obetnij img
 {
  width: 50px;
  height: 50px;
  overflow: hidden;
 }
[HTML] pobierz, plaintext 

Co prawda nie obcina ale pod IE skaluje.

[pawelooss]

;]

ściągnij darmowy program do kadrowania fotek=>JPEGrops i kombinuj ręcznie

Dzięki, wolę IrfanView. ;]

Co prawda nie obcina (...)

Co prawda nie odpowiedź, ale dzięki.


To wszystko są półśrodki, które wszyscy dobrze znają. A aż takim początkującym, by nie wiedzieć o skalowaniu IMG-ów, to nie jestem. Po prostu nie spotkałem się jeszcze z przedstawionym problemem równego obcinania w HTML (żadne PHP).

Kodu obrazka nie mogę zmienić, bo jest on generowany dynamicznie.
Podałem przykład 70 pikseli, ale równie dobrze może to być 60, 87 lub 46 piskeli.


Ktoś musi wiedzieć, jak to rozwiązać. Do boju.

Ten post edytował pawelooss 19.02.2010, 18:16:22

[messmaker]

[HTML] pobierz, plaintext 
<div style="width: 50px; overflow: hidden;"><div style="margin-left:-300%;width: 300px; text-align:center;"><img src="img.png" alt="70 pikseli szerokosci" /></div></div>
[HTML] pobierz, plaintext 

Niezależnie od pierwotnej szerokości obrazka, o ile nie przekroczy 300px. Jeśli tak, to należy zmodyfikować kod.

Ten post edytował messmaker 19.02.2010, 18:27:27

[krzysztof_kf]

nie jestem pewien może ci co pomoże

Kod

div.figure {
  float: right;
  width: 15%;
  margin: 0.5em;
  padding: 0.5em;
  
}
img.scaled {
  width: 100%;
}

<div class="figure">
<img class="scaled" src="fit.jpg"</div>

[pawelooss]

[HTML] pobierz, plaintext 
<div style="width: 50px; overflow: hidden;"><div style="margin-left:-300%;width: 300px; text-align:center;"><img src="img.png" alt="70 pikseli szerokosci" /></div></div>
[HTML] pobierz, plaintext 

Niezależnie od pierwotnej szerokości obrazka, o ile nie przekroczy 300px. Jeśli tak, to należy zmodyfikować kod.

Działa doskonale, bardzo dziękuję. Nie muszę już testować innych metod.