Wie skaliere ich ein Bild in reinem HTML/CSS, während ich seine Proportionen behalte?

Question

Wie kann ich ein Bild nur mit HTML/CSS (d. H. Ohne Servercode) skalieren, während ich seine Proportionen beibehalte und einen Zuschneideeffekt habe? Details: Ich möchte die Größe auf eine bestimmte Breite ändern, die Proportionen beibehalten und wenn die Höhe größer als ein bestimmter Wert ist, um sie auf die angegebene Höhe zuzuschneiden?

Eigentlich weiß ich, wie das mit einigen Server-Code zu tun, aber ich möchte dies nicht tun. Es würde bedeuten, eine andere Dateireferenz zu verwenden und das Bild so etwas wie <img src="picture.php" /> zu verweisen. Ich muss das Bild auf der gleichen Seite bearbeiten, auf der es angezeigt wird.

Was mich "stört" ist, dass ich den Bildkopf senden muss, damit sonst nichts auf der Seite angezeigt wird.

Gibt es eine Möglichkeit, so etwas zu tun? Vielleicht aus reinem HTML/CSS? : P

habe ich eine Funktion, die so etwas tut (außer dass „Ernte“ Sache), und es gibt nur width="" height="" und ich verwende es wie diese <img src="image.jpg" resize("image.jpg") />, aber ich habe nicht, wie kann ich das tun Ernte .. .

Dank

Answer 1

ok, also habe ich einen Weg gefunden, das von html/css aus zu machen.Die ganze Idee war zu jener „extraheight“ loszuwerden:

<div style="width:200px;height:200px;overflow:hidden;" > 
    <img src="image.jpg" width="200px" height="auto"> 
</div> 

zuerst mein Bild auf die gewünschte Breite der Größe verändert wird (die Proportionen zu halten) und dann eine feste Höhe zu enthalten div geben und setting overflow to hidden macht das Skript nur angezeigt werden der gewünschte Teil des Bildes.

Answer 2

Sie kein Bild und HTML-Code in der gleichen Datei, um sie zu interpretieren, da Browser auf seinem content-type Header abhängig machen kann.

Der Header content-type eines HTML-Dokuments wird im Allgemeinen auf text/html festgelegt, während der Inhaltstyp eines Bilds image/* ist (ersetzen Sie * für Bildformat). Sie könnten Bilddaten in ein HTML-Dokument drucken, aber da der Browser angewiesen wird, sie als text/html statt als ein Bild zu interpretieren, wäre ihr Inhalt verstümmelt.

Sie müssen Ihren Tag mit einer PHP-Datei wie beschrieben verbinden. Ich bin nicht sicher, warum das ein Problem darstellt; Das ist der richtige Weg. Sie könnten natürlich das Bild zuschneiden, indem Sie seine Dimensionen in HTML manipulieren, aber ich empfehle Ihnen nicht, dies zu tun.

Answer 3

erstellen Helfer wie:

<?php 
echo '<img src="' . image_resize($path_to_image, SIZE_X, SIZE_Y) . '" />'; 
?> 

so wird dieser Helfer überprüfen, ob skalierte Bild bereits neu erstellt oder erstellen. und in beiden Fällen gibt es die richtige URL für das neue Bild zurück.

Answer 4

Ich denke, ImageMagick unterstützt "Größe anpassen" und "Größe zu füllen" -Methoden, letztere ist was Sie suchen.

Bevor Sie Ihr img-Tag in den Ausgabepuffer schreiben, speichern Sie das Bild unter dem resultierenden vorgeschlagenen Dateinamen und lassen Sie 'identifizieren' die Breite und Höhe dieses Bildes für Sie extrahieren.

Wenn Sie nicht mit einer separaten Datei arbeiten möchten, sondern stattdessen die Bilddaten inline möchten, versuchen Sie es mit den data-uri method, die neuere Webbrowser unterstützen. Dadurch wird der binäre Datenstrom des Bildes in die HTML-Datei eingebunden, so dass es eingebettet ist.

Answer 5

Sie können phpThumb verwenden, um die Größe der Bilder im laufenden Betrieb zu ändern und zu beschneiden. Es verwendet die GD-Bibliothek, um Thumbnails aus den Bildern JPEG, PNG, GIF usw. zu erstellen.