[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ł". (IMG:style_emoticons/default/winksmiley.jpg)


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. (IMG:style_emoticons/default/smile.gif)

[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. (IMG:style_emoticons/default/biggrin.gif)

[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... (IMG:style_emoticons/default/winksmiley.jpg)

[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? (IMG:style_emoticons/default/biggrin.gif)

[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. (IMG:style_emoticons/default/winksmiley.jpg)


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). (IMG:style_emoticons/default/tongue.gif)

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. (IMG:style_emoticons/default/winksmiley.jpg)


Ktoś musi wiedzieć, jak to rozwiązać. Do boju. (IMG:style_emoticons/default/haha.gif) (IMG:style_emoticons/default/smile.gif)

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ę. (IMG:style_emoticons/default/biggrin.gif) Nie muszę już testować innych metod. (IMG:style_emoticons/default/smile.gif)