Ich habe ein Skript erstellt: http://jsfiddle.net/radar24/XZgh4/, das das Gegebene skaliert Dimension in die äußere div. Alles scheint in Ordnung zu sein, bis ich eine Dimension wie 200 x 99 eingebe. Dann wächst die Box nach draußen.

Ich kann die Ursache dafür wirklich nicht finden, kann jemand helfen?

0
Ryandell 9 Okt. 2012 im 02:28

3 Antworten

Beste Antwort

Das Problem ist, dass Sie Ihre Proportionen nicht entlang beider Achsen einschränken. Ihre Box hat ein Verhältnis von Höhe zu Breite von 5: 3. Wenn Sie nicht entlang beider Achsen einschränken, kann es außerhalb der Boxen zu Blutungen kommen. Ein Beispiel könnte dies am besten zeigen.

Nehmen wir den Fall, dass die Höhe die größere der beiden Dimensionen ist. Ihr Code beschränkt ihn nur entlang der 500px-Achse. Wenn wir also eine Kiste mit 5:> 3 Proportionen hineinwerfen, erhalten Sie eine schleichende Kante.

Geben Sie beispielsweise "3" und "5" in Ihre Felder ein. Passt perfekt. Jetzt mach es 3.1 und 5. Ruh roh.

Sie müssen in jedem Abschnitt eine weitere if-Anweisung hinzufügen, die DANN bestimmt, ob das Dimensionsverhältnis außerhalb dieser Grenze liegt. In dem obigen Fall müssen Sie es so einstellen, dass die Höhe des 5: 3.1 nicht 500px beträgt, sondern die Höhe (weniger als 500px), die dazu führen würde, dass 3.1 300px entspricht. Das wäre 483px.

Macht das Sinn?

Wenn nicht, werde ich versuchen, es erneut zu formulieren:

Fügen Sie einen weiteren Satz von if-Anweisungen in die beiden if-Anweisungen ein, die Sie bereits haben. Diese prüfen, ob beim Festlegen der GRÖSSEREN Bemaßung die KLEINERE Bemaßung in dieser Richtung außerhalb der Grenzen des Felds liegt. im Pseudocode

if (height > width)
    calculate the height
    calculate the width
    if (width > div.width)
       width = div.width
       height = div.width * aspect;

Fragen Sie mich einfach, ob dies nicht klar genug ist!

Bearbeiten: Hier ist eine JSFiddle, die es richtig macht. Sie müssen weiteren Code hinzufügen, wenn Sie an jeder Kante einen weißen Rand wünschen.

Edit2: Hier ist der weiße Rand zurück!

Edit3: Sie können auch versuchen, es zu verschönern und dabei nur Aspekte zu verwenden. Ich habe den ersten für dich gemacht. Noch drei!

1
jamesplease 8 Okt. 2012 im 23:57

JQuery .val () gibt immer eine Zeichenfolge zurück, die Sie in eine Ganzzahl analysieren sollten

jsfiddle geändert

....

        height = parseInt($('#height').val()) || 0;// making 0 as default value.
        width = parseInt($('#width').val()) || 0;
....
0
Anoop 9 Okt. 2012 im 16:22

Es ist ein ziemlich kleiner Fehler. Sie haben vergessen, die width und height in Ganzzahlen umzuwandeln, bevor Sie sie verglichen haben. Sie müssten also if (width >= height) in if (parseInt(width) >= parseInt(height)) ändern.

0
Sidharth Mudgal 8 Okt. 2012 im 22:42