wake-up-neo.com

Angeben von Breite und Höhe in Prozent, ohne die Proportionen von Fotos in HTML zu verzerren

Ich habe mich gefragt, ob ich in den Attributen width und height width und height in Prozent angeben kann.

Nun, ich denke, das ist offensichtlich, denn wenn ich es versuche, ändert sich die Größe, aber es scheint die Qualität meines Bildes zu beeinträchtigen.

Hier ist ein Beispiel für mein Markup mit festen Attributen:

<img src="#" width="346" height="413">

Jetzt, während Sie versuchen, dies zu verkleinern, sagen wir um die Hälfte, über Prozentsätze:

<img src="#" width="50%" height="50%">

Ich bekomme etwas ganz anderes als:

<img src="#" width="173" height="206.5">

Ich glaube, ich verwechsle nur grundlegend meine prozentualen Aufschläge oder so etwas, weil es einen merklichen Unterschied zwischen meinem zweiten und dritten Beispiel gibt.

UPDATE: Hey, danke an alle für all die hilfreichen Beiträge!

Ich mag den jQuery-Vorschlag von Pat wirklich sehr, nur weil ich mit einem einzigen Snippet, wie er vorgeschlagen hat, den Selektor tatsächlich ändern und ihn auf alle Bilder anwenden kann, die von meiner Fancybox betroffen sind, wie folgt:

$('img.FancyBox').each(function(){
  $(this).width($(this).width() * 0.25);
});

Wie geil ist das denn!

Sie können den Live-Effekt hier auf meiner Website überprüfen: http://www.marioplanet.com/product.htm

Es funktioniert ziemlich gut, wenn man bedenkt, dass ich, sobald ich es mit meiner SQL Server-Datenbank verbinde, dieses eine jQuery-Snippet einfach auf alle Bilder der FancyBox-Klasse auf meinen Produktseiten anwenden kann.

Danke Leute!

htmlimageresizesize
53
Qcom

Diese prozentualen Breiten in Ihrem zweiten Beispiel beziehen sich tatsächlich auf den Container, den Sie <img> ist in und nicht die tatsächliche Größe des Bildes. Angenommen, Sie haben den folgenden Markup:

<div style="width: 1000px; height: 600px;">
    <img src="#" width="50%" height="50%">
</div>

Das resultierende Bild ist 500 Pixel breit und 300 Pixel hoch.

jQuery Resize

Wenn Sie versuchen, ein Bild auf 50% seiner Breite zu reduzieren, können Sie dies mit einem Ausschnitt aus jQuery tun:

$( "img" ).each( function() {
    var $img = $( this );
    $img.width( $img.width() * .5 );
});

Stellen Sie einfach sicher, dass Sie zuerst alle Attribute für Höhe/Breite = 50% entfernen.

59
Pat

Sie können den einen oder anderen Wert einstellen (nur nicht beide) und das sollte das gewünschte Ergebnis bringen.

<img src="#" height="50%">
20
Fosco

Hier ist der Unterschied:

Dadurch wird das Bild auf die Hälfte seiner Originalgröße eingestellt.

<img src="#" width="173" height="206.5">

Dadurch wird das Bild auf die Hälfte der verfügbaren Präsentationsfläche eingestellt.

<img src="#" width="50%" height="50%">

Wenn Sie dies beispielsweise als einziges Element auf die Seite setzen, wird versucht, 50% der Breite der Seite in Anspruch zu nehmen, sodass sie möglicherweise größer als ihre ursprüngliche Größe ist - nicht die Hälfte ihrer ursprünglichen Größe, wie Sie es erwarten .

Wenn das Bild größer als das Originalformat dargestellt wird, erscheint es stark pixelig.

5
Fenton

width = "50%" und height = "50%" setzen die Attribute width und height auf die Hälfte der Breite und Höhe des übergeordneten Elements, wenn ich mich nicht irre. Wenn Sie nur die Breite oder Höhe festlegen, sollte auch die Breite oder Höhe auf den Prozentsatz des übergeordneten Elements festgelegt werden, wenn Sie Prozente verwenden.

2
pkauko

Angesichts des Mangels an Informationen zur ursprünglichen Bildgröße würde die Angabe von Prozentsätzen für die Breite und Höhe zu sehr fehlerhaften Ergebnissen führen. Wenn Sie sicherstellen möchten, dass ein Bild an eine bestimmte Stelle auf Ihrer Seite passt, müssen Sie einen serverseitigen Code verwenden, um diese Neuskalierung zu verwalten.

2
Lazarus

Versuchen Sie, die Eigenschaft scale in css3 zu verwenden:

75% des Originals:

-moz-transform:scale(0.75);
-webkit-transform:scale(0.75);
transform:scale(0.75);

50% des Originals:

-moz-transform:scale(0.5);
-webkit-transform:scale(0.5);
transform:scale(0.5);
2
Nalan Madheswaran

Von W3Schools

Die Höhe in Prozent des enthaltenen Elements (wie "20%").

Also denke ich, dass sie das Element bedeuten, in dem sich der Div befindet?

1
JavaPete