von Bild nur Ausschnitt Mitte anzeigen ?
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
abmessung
angeben
ausgabe
ausschnitt
beispiel
bild
boxen
bringen
code
ei
fehlen
mitte
nutz
obere linke ecke
pixel
position
problem
prozent
quadrat
verzerrung
-
Hallo
Ich habe eine Box (DIV) für Bild-Ausgabe mit fester Größe: 150 x 150 Pixel
Wenn jetzt das Bild aber größer/ kleiner ist als diese Box,
dann soll es verkleinert / vergrößert ausgegeben werden
aber ich möchte vom Bild nicht die obere linke Ecke
sondern die Bild-Mitte (vertikal und horizontal zentriert) angezeigt bekommen.
Beispiel:
<div class="imgbox" style="margin:2px; padding:0; width:150px; height:150px; overflow:hidden; text-align:center;"> <img src="meinbild.jpg" style="max-width:150px; max-height:150px;" alt="Mein Bild" border="0" /> </div>
mit dem "max-width" und "max-height"
wird zwar die größere der Seiten angepasst, so dass das Verhältnis richtig bleibt,
(so dass das Bild entweder 150px breit oder hoch ist und keine Verzerrung hat)
aber ...wenn Bild nicht Quadratisch ist, ist eine der Seiten immer zu klein ...
---> Die Box (class="imgbox") soll aber immer voll ausgefüllt sein.
a) BSP ... horizontal: (links/rechts)
wenn das Bild in Original-Größe die Abmessungen: 300 x 600 Pixel hat
dann wird so zwar die Höhe auf 150 angepasst, aber die Breite ist dann zu klein
und die Box ist dann inks/rechts nicht voll ausgefüllt
b) BSP ... vertikal (oben/unten)
wenn das Bild in Original-Größe die Abmessungen: 600 x 300 Pixel hat
dann wird so zwar die Breite auf 150 angepasst, aber die Höhe ist dann zu klein.
und die Box ist dann oben/unten nicht voll ausgefüllt
... die Box (class="imgbox") soll aber immer voll mit dem Bild ausgefüllt sein.
wobei die Bild-Mitte immer auch in der Box-Mitte sein soll.
bzw so .... wenn das Bild kein Quadrat ist,
dann soll die größere Seite nicht nur auf einer Seite (rechts oder unten) abgeschnitten werden, sondern es soll von jeder Seite (links+rechts oder oben+unten) jeweils die hälfte "fehlen", so dass man vom Bild einen mittigen Ausschnitt hat, also die Bild-Mitte soll immer auch in der Box-Mitte sein.
ich hoffe mein Problem wurde verstanden ...
... wie kann ich mit CSS ein Bild in DIV mit fester Größe bringen,
so dass die Box immer voll ausgefüllt ist und das Bild keine Verzerrung hat
wenn eine Bild-Seite (im Verhältnis) zu groß ist,
dann soll davon ein mittiger Auschnitt angezeigt werden.
und nicht nur auf eier Seite abgeschnitten werden.
EDIT
noch ein BSP
in CSS steht min-width:160px + min-height:160px
Bild Original --> 302px × 456px (Skaliert zu 160px × 242px)
... wie dann von 242px mittiger Ausschnitt 160px ?
Beitrag zuletzt geändert: 26.1.2014 12:29:24 von morphsuite -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Das klingt schwierig, ist aber einfach.
Google mal nach background-size, background-position und nutze nach dem Bild in der Box clear:both;
Damit solltest du das einfach hinkriegen :)
Mit background-size kannst du die Größe des Bildes in Prozent angeben (z.B. 200%), mit background-position zentrierst du das ganze dann. -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage