Ich habe ein Bild und möchte eine bestimmte Breite und Höhe (in Pixel) festlegen.
Wenn ich jedoch Breite und Höhe mit css ( width:150px; height:100px
) einstelle, wird das Bild gestreckt und es kann hässlich sein.
Wie fülle ich Bilder mit CSS auf eine bestimmte Größe und strecke sie nicht?
Beispiel für das Füllen und Strecken von Bildern:
Original Bild:
Gestrecktes Bild:
Gefülltes Bild:
Bitte beachten Sie, dass im gefüllten Bild Beispiel oben: Erstens, Bild 150x255 (beibehalten Seitenverhältnis) geändert wird, und dann, es abgeschnitten zu 150x100.
width
undheight
sollte entsprechend anpassenAntworten:
Wenn Sie das Bild als CSS-Hintergrund verwenden möchten, gibt es eine elegante Lösung. Verwenden Sie einfach
cover
odercontain
in derbackground-size
CSS3-Eigenschaft.Während
cover
Sie ein vergrößertes Bild erhalten, erhaltencontain
Sie ein verkleinertes Bild. In beiden Fällen bleibt das Pixel-Seitenverhältnis erhalten.http://jsfiddle.net/uTHqs/ (mit Abdeckung)
http://jsfiddle.net/HZ2FT/ (mit enthalten)
Dieser Ansatz hat den Vorteil, dass er gegenüber Retina-Displays gemäß der Kurzanleitung von Thomas Fuchs freundlich ist .
Es ist erwähnenswert, dass die Browserunterstützung für beide Attribute IE6-8 ausschließt.
quelle
background-repeat: no-repeat;
? Wenn das Bild den Container bedeckt, wiederholt es sich ohnehin nicht.Sie können die CSS-Eigenschaft verwenden
object-fit
.Siehe Beispiel hier
Es gibt eine Polyfüllung für IE: https://github.com/anselmh/object-fit
quelle
img
Tags möglich ist (nicht nurbackground-image
die in der obigen Antwort beschriebene Methode). Vielen Dank :)object-fit
dies in sehr vielen Browsern nicht unterstützt wird .background-size
ist in meinen Projekten selten eine praktikable Lösung. Es ist weniger wahrscheinlich, dass Sie einen SEO-Vorteil erhalten, und Sie können kein ALT-Tag, keine Beschriftung usw. zum Bild hinzufügen, wenn Sie möglicherweise zusätzlichen Kontext für Bildschirmleser bereitstellen möchten.object-fit: cover;
macht es. Vielen DankVerbesserung der obigen Antwort durch @afonsoduarte ( NICHT die akzeptierte) .
falls Sie Bootstrap verwenden
Es gibt drei Unterschiede:
Bereitstellung
width:100%
für den Stil.Dies ist hilfreich, wenn Sie Bootstrap verwenden und möchten, dass das Image die gesamte verfügbare Breite ausdehnt.
Die Angabe der
height
Eigenschaft ist optional. Sie können sie nach Bedarf entfernen / behaltenÜbrigens müssen die Attribute
height
undwidth
für dasimage
Element NICHT angegeben werden, da sie vom Stil überschrieben werden.es reicht also aus, so etwas zu schreiben.
quelle
Der einzige wirkliche Weg besteht darin, einen Container um Ihr Bild zu haben und Folgendes zu verwenden
overflow:hidden
:HTML
CSS
Es ist ein Problem in CSS, das zu tun, was Sie wollen, und das Bild zu zentrieren. In jquery gibt es eine schnelle Lösung wie:
http://jsfiddle.net/x86Q7/2/
quelle
margin-top
zum Beispiel ein Bild festlegen50px
(siehe: jsfiddle.net/x86Q7/1 ), aber wie schneide ich es von der realen Mitte aus zu ? (Ohne jQuery?)CSS-Lösung kein JS und kein Hintergrundbild:
Methode 1 "margin auto" (IE8 + - NICHT FF!):
http://jsfiddle.net/5xjr05dt/
Methode 2 "Transformation" (IE9 +):
http://jsfiddle.net/5xjr05dt/1/
Methode 2 kann verwendet werden, um ein Bild in einem Container mit fester Breite / Höhe zu zentrieren. Beide können überlaufen - und wenn das Bild kleiner als der Container ist, wird es trotzdem zentriert.
http://jsfiddle.net/5xjr05dt/3/
Methode 3 "Double Wrapper" (IE8 + - NICHT FF!):
http://jsfiddle.net/5xjr05dt/5/
Methode 4 "Double Wrapper AND Double Image" (IE8 +):
http://jsfiddle.net/5xjr05dt/26/
Methode 1 und 3 scheinen mit Firefox nicht zu funktionieren
quelle
Eine andere Lösung besteht darin, das Bild in einen Behälter mit der gewünschten Breite und Höhe zu legen. Mit dieser Methode müssten Sie das Bild nicht als Hintergrundbild eines Elements festlegen.
Dann können Sie dies mit einem
img
Tag tun und einfach eine maximale Breite und Höhe für das Element festlegen.CSS:
HTML:
Wenn Sie nun die Größe des Containers ändern, wird das Bild automatisch so groß wie möglich, ohne die Grenzen zu überschreiten oder zu verzerren.
Wenn Sie das Bild vertikal und horizontal zentrieren möchten, können Sie das Container-CSS ändern in:
Hier ist eine JS-Geige http://jsfiddle.net/9kUYC/2/
quelle
Aufbauend auf der Antwort von @Dominic Green mit jQuery ist hier eine Lösung, die für Bilder funktionieren sollte, die entweder breiter als hoch oder höher als breit sind.
http://jsfiddle.net/grZLR/4/
Es gibt wahrscheinlich eine elegantere Art, JavaScript zu erstellen, aber das funktioniert.
quelle
Seien Sie vorsichtig, wenn Sie ein Thema oder etwas verwenden. Oft wird die maximale Breite img bei 100% angegeben. Du musst keine machen. Teste es aus :)
https://jsfiddle.net/o63u8sh4/
quelle
Ich habe geholfen, ein jQuery-Plugin namens Fillmore zu erstellen , das die
background-size: cover
Browser unterstützt, die es unterstützen, und ein Shim für diejenigen hat, die dies nicht tun. Schau es dir an!quelle
Ich denke, es ist ziemlich spät für diese Antwort. Ich hoffe auf jeden Fall, dass dies jemandem in Zukunft helfen wird. Ich hatte das Problem, die Karten eckig zu positionieren. Es werden Karten für eine Reihe von Ereignissen angezeigt. Wenn die Bildbreite des Ereignisses für die Karte groß ist, sollte das Bild durch Zuschneiden von zwei Seiten und einer Höhe von 100% angezeigt werden. Wenn die Bildhöhe lang ist, wird der untere Teil der Bilder zugeschnitten und die Breite beträgt 100%. Hier ist meine reine CSS-Lösung dafür:
HTML:
CSS
quelle
Versuchen Sie so etwas: http://jsfiddle.net/D7E3E/4/
Verwenden eines Containers mit Überlauf: versteckt
EDIT: @ Dominic Green hat mich geschlagen.
quelle
Dadurch werden Bilder bis zu einer bestimmten Größe gefüllt, ohne sie zu dehnen oder zu beschneiden
quelle
Versuchen Sie Folgendes, um das Bild in den Vollbildmodus zu integrieren:
Hintergrundwiederholung: rund;
quelle
quelle