Breite und Höhe als Prozentwerte angeben, ohne die Proportionen der Fotos in HTML zu verändern

Question

Ich frage mich, ob ich in den Attributen Breite und Höhe Breite und Höhe als Prozentsätze angeben könnte?

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 verfälschen. Hier

ist ein Beispiel für meine Markup mit festen Attributen:

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

Jetzt, bei dem Versuch, diese zu verringern, etwa durch die Hälfte, über Prozentsatz:

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

ich etwas ganz anderes als:

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

ich glaube, ich meine prozentualen Aufschlag oder s zu verkennen nur grundlegend etwas, weil es einen sichtbaren Unterschied zwischen meinem zweiten und dritten Beispiel gibt.

UPDATE: Hey vielen Dank für alle hilfreichen Beiträge!

ich wirklich wirklich wie der Vorschlag jQuery von Pat gemacht, nur weil mit einem Snippet als er vorschlug, ich die Wähler tatsächlich ändern kann und es die an alle meine fancybox betroffen Bilder wie-so gelten machen:

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

Wie großartig ist das!

Sie können hier an meiner Seite den Live-Effekt finden Sie unter: http://www.marioplanet.com/product.htm

Es funktioniert ziemlich gut, wenn man bedenkt, dass, wenn ich es zu meinem SQL Server db verbinden, dann kann ich nur dann Anwendung, wenn ein jQuery-Snippet alle FancyBox-Klassenbilder auf meinen Produktseiten.

Danke Jungs!

Answer 1

Diese prozentualen Breiten in Ihrem zweiten Beispiel gelten tatsächlich für den Container, in dem sich Ihre befindet, und nicht die tatsächliche Größe des Bilds. Angenommen, Sie haben die folgende Auszeichnung:

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

Ihr Ergebnisbild ist 500 Pixel breit und 300 Pixel groß.

jQuery Resize

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

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

So stellen Sie sicher, dass Sie nehmen Aus jeder Höhe/Breite = 50% Attribute zuerst.

Answer 2

Sie können die eine oder andere (nur nicht beide) und das sollte das gewünschte Ergebnis erhalten.

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

Answer 3

Von W3Schools

Die Höhe in Prozent des umschließenden Elements (wie "20%").

Also ich denke, dass sie das Element bedeuten, wo das div ist?

Answer 4

width = "50%" und height = "50%" setzt 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, sollten Sie die Breite oder Höhe auf den Prozentsatz des übergeordneten Elements einstellen, wenn Sie Prozent verwenden.

Answer 5

Angesichts der fehlenden Informationen über die ursprüngliche Bildgröße würde die Angabe von Prozentangaben für die Breite und Höhe zu stark unregelmäßigen Ergebnissen führen. Wenn Sie sicherstellen möchten, dass ein Bild an einen bestimmten Ort auf Ihrer Seite passt, müssen Sie einen serverseitigen Code verwenden, um diese Neuskalierung zu verwalten. Hier

Answer 6

ist der Unterschied:

Hier wird das Bild auf die Hälfte seiner ursprünglichen Größe.

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

Damit wird das Bild auf die Hälfte des verfügbaren Präsentationsbereichs festgelegt.

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

Zum Beispiel, wenn Sie dies als die auf der Seite nur Element setzen, würde es versuchen 50% der Breite der Seite zu nehmen, so dass es möglicherweise größer als die ursprüngliche Größe zu machen - nicht die Hälfte seine ursprüngliche Größe, wie Sie es erwarten.

Wenn das Bild größer als die Originalgröße dargestellt wird, erscheint das Bild stark verpixelt.

Answer 7

Es gibt tatsächlich eine Möglichkeit, dies nur mit HTML zu tun. Nur setzt:

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

Answer 8

try Maßstab Eigentum in css3:

75% original:

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

50% der original:

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