Ich möchte ein <img> , dessen Breite 40% der Seite beträgt, und es wird gestreckt.
Wie kann ich die Größe ändern ohne zu strecken?
Zum Beispiel, wenn ich ein Bild habe, dessen Datei ursprünglich so aussieht:
%Vor%Normalerweise sollte es auf meiner Webseite so aussehen:
%Vor% Sobald ich den Browser etwas enger mache, wird max-width (sagen wir 10 Zeichen in diesem Beispiel) wirksam.
Wenn das passiert, möchte ich es sein:
(genau wie es von der rechten Seite geschnitten wurde. Natürlich von beiden Seiten sind besser),
Anstatt:
<div> zu bringen) ist in Ordnung. Der Trick besteht darin, das Bild in ein umschließendes Blockelement, z. B. ein DIV, zu legen. Sobald Sie die Bildbreite auf 100% eingestellt haben, wird der Browser angewiesen, die Bildbreite mit der linken und rechten Kante des DIVs auszurichten.
Sie steuern dann die Breite des DIV über CSS. Ich finde, dass das Beibehalten des Bildes in einem Blockelement die Manipulation beim Erstellen flüssiger Layouts wesentlich erleichtert.
Beispiel:
Wenn Sie möchten, dass das Bild abgeschnitten / beschnitten wird, stellen Sie es so ein, dass es größer als das übergeordnete Bild ist, und legen Sie den Überlauf css des Elternteils auf versteckt fest.
Beispiel:
Hoffe, das hilft ...
Hier ein paar Optionen. (Siehe die Demo aller Optionen hier: Ссылка )
Der erste als einfaches Bild unbekannter Größe. Dies wird in welcher Größe auch immer angezeigt.
%Vor%Aber wie sich herausstellt, können Sie das Seitenverhältnis eines Bildes beibehalten, wenn Sie nur die Breite oder nur die Höhe festlegen. Die andere Dimension wird sich anpassen, damit sich die Dinge nicht ausdehnen.
%Vor%Wenn Sie jedoch CSS-Hintergrundbilder verwenden, können Sie basierend auf der Verankerung des Hintergrunds einige kreative Schnitte erstellen.
Das sagt "Go"
%Vor%Und das sagt "gle":
%Vor%Versuchen Sie ImageResizer zu verwenden. Hier ist der Link: Ссылка
Fügen Sie diese Klasse dem HTML-Tag img hinzu. Das Bild wird so beibehalten, wie es ist, aber es wird den erforderlichen spezifizierten Platz einnehmen, dh 40% x 40% ohne das Bild zu strecken
%Vor%