✔ Tabellengröße "FIXIEREN"

baeri hat gesagt.:
Aber nun gut... wie ihr selbst seht, sind eure Lösungen optisch und "Aufwandstechnisch" meinen unterlegen!
Zum Vergrößern anklicken....
Den Aufwand siehst du nur, weil dir Techniken beschrieben werden welche du schlichtweg nicht begreifst. Was möchtest du denn eigentlich? Du suchst offenbar den richtigen und besten Weg. Den finden wir sicher.

Da beginnt schon das Problem. Es kommt darauf an um was für Bilder es sich handelt. Sind es inhaltlich relevante Bilder, so sind die von dir gesuchten HTML-Elemente unter Anderem figure, evtl. figcapture und img. Wenn es sich nur um Bilder handelt, die im Rahmen des Designs deine Seite optisch aufwerten sollen, so bist du schon beim img-Tag falsch. Was du dann suchst ist ein Element ohne semantische Bedeutung, welchem du das entsprechende Bild als Hintergrund zuweist. Das einzige Element ohne großartige semantische Bewandnis ist der div-Container.

Über die Anordnung der Container brauche ich nichts mehr sagen, das ist in diesem Beitrag von @MrMurphy mehr als ausführlich zusammengefasst.

Die Bilder deckend zu positionieren ist dank Techniken wie overflow oder background-size ebenso einfach. Du musst bei unterschiedlichen Formaten nur darauf achten dich immer an der längeren Kante (Höhe oder Breite) zu orientieren. In letzter Instanz könntest du auch in Erwägung ziehen die Bilder serverseitig (PHP) oder clientseitig (Javascript) zu skalieren und zuzuschneiden, dafür gibt es aber keinen Grund.

Ich verstehe auch nicht warum alle bisherigen Lösungsansätze deinem optisch unterlegen sein sollen? Ich finde in keinem dieser bisher 9 Beispiele eine von deinen beschriebenen Vorstellungen abweichende Darstellung, außer bei deinem.

Was gefällt dir denn außer deinen Tabellen am Besten und wo genau liegt da das Problem?

Wenn du ernsthafte und konstruktive Hilfe möchtest, dann solltest du vielleicht davon ablassen Lösungsansätze direkt als Unsinn abzustempeln, nur weil dir die Umsetzung nicht direkt gelingt. Schließlich kann niemand ahnen wie gut du dich auskennst und keiner verdient es, dass seine Lösungsvorschläge niedergemacht werden, schließlich hast du nicht nach einer fertigen Lösung gefragt. Da würden auch noch einige Details fehlen.

Wenn du allerdings anfängst hier zu trollen, dann wirst du ewig auf deiner (deiner Ansicht nach nicht richtigen) Lösung sitzen bleiben.
 
Chailin hat gesagt.:
Da beginnt schon das Problem. Es kommt darauf an um was für Bilder es sich handelt. Sind es inhaltlich relevante Bilder, so sind die von dir gesuchten HTML-Elemente unter Anderem figure, evtl. figcapture und img. Wenn es sich nur um Bilder handelt, die im Rahmen des Designs deine Seite optisch aufwerten sollen, so bist du schon beim img-Tag falsch. Was du dann suchst ist ein Element ohne semantische Bedeutung, welchem du das entsprechende Bild als Hintergrund zuweist. Das einzige Element ohne großartige semantische Bewandnis ist der div-Container.

Die Bilder deckend zu positionieren ist dank Techniken wie overflow oder background-size ebenso einfach. Du musst bei unterschiedlichen Formaten nur darauf achten dich immer an der längeren Kante (Höhe oder Breite) zu orientieren. In letzter Instanz könntest du auch in Erwägung ziehen die Bilder serverseitig (PHP) oder clientseitig (Javascript) zu skalieren und zuzuschneiden, dafür gibt es aber keinen Grund.
Zum Vergrößern anklicken....

1. IMG-Tags verwendete (vergangenheitsvorm) ich nur zum überblenden
2. mit Background beschreibst du genau MEINE Lösung...
3. das meine Lösung abweicht ist ein lustiger Satz ^^ ... da könnte man aber auch mal >anders< denken.
4. nix... PHP gibt es nicht und mit Javascript ein Bild überarbeiten (mal abgesehen von Skalierungen) ist nicht erwünscht.

ich denke ich habe von Anfang an klar gemacht, dass die Bilder austauschbar sein MÜSSEN... alle Beispiele die ihr mir liefert sind entweder versetzt oder mit Speziell zugeschnittenen Bildern!

Ich mache niemandes Lösung schlecht sondern ich Ärger mich darüber dass ich hier 1000 Lösungen bekomme aber niemand hat sich mit meinem Problem befasst. Du stellst doch deiner Freundin/Frau auch nicht das grüne Auto hin obwohl sie unbedingt ein rotes will!

Anforderungsliste:
- ich hab ein Pool von über 100 Bildern, die Bilder sind im Querformat und habe alle "Standarddiemensionierung" also nix mit Panorama oder so... trotzdem weichen Handybilder von DSLR Bilder etwas ab 16:9 vs 15:10... Diese Bilder will ich weder in 8 Versionen zuschneiden noch sonst irgendwie anfassen... ich werde diese noch nicht mal Komprimieren, da dies eine Intranetanwendung ist und die Leistung ausreicht um 7 Bilder gleichzeitig auf voller Auflösung zu Laden
- Diese Bilder müssen perfekt in die vorgegebene Tabelle passen... was etwas "missverstanden" wurde ist dass auch BILD 1 im selben Format ist... d.h. ich habe eine 6 (kleine) Bilder in der Breite und 3 (kleine) Bilder in der höhe. Die ersten 9 Bilder (im Block) werden Gruppiert und die letzten 4 Bilder (im Block) werden ebenso Gruppiert (hier wird natürlich nur 1 Bild angezeigt).
- Das Design soll selbst "etwas" anpassbar sein d.h. Rahmenfarbe / Größe ,... soll über das Interface via z.B. Javascript eingegeben werden (aber das kann ich selbst > unter der Voraussetzung das Design lässt dies zu und verschiebt mir nicht die Bilder) <- ebenso sollte auch nicht jedes Bilder einen eigenen Rahmen bekommen, sondern lediglich das Gerüst (also kein Doppelrahmen zwischen zwei Bildern)
- Ich will über das Bild ein Bild legen können (damit erzeug ich den Übergangseffekt) <- Bild wird 100% Transparent eingefügt, Bild wird auf 100% Sichtbar gemacht, Hintergrund (oder Bild dahinter) wird ersetzt, vorderes Bild wird entfernt.

Das Komplette Objekt soll sich der Seite anpassen... d.h. 100% Breite (abzüglich Bodymargin) in der Handyversion wird das 1. große Bild nach oben gestellt.

wenn ihr noch Lust habt... jetzt sollte es klar sein.
wer nicht Lust hat oder n Problem mit meinen Anforderungen darfs auch einfach sein lassen. Meine Lösung funktioniert und wird / kann nur durch einer "besseren" abgelöst werden (auch wenn ich nie behaupte, dass meine Lösung "edel" ist, weil es mir selbst klar ist, dass hier noch "Probleme" sind).
 
Dann kannst du doch nun mit den hier vorgeschlagenen Lösungen anfangen deine Liste selbst abzuarbeiten.

Vielleicht kann ich dir noch etwas auf die Sprünge helfen. Du sagst, du hast Bilder im Querformat und als Richtwert für die Seitenverhältnisse hast du 16:9 und 15:10 angegeben. Außerdem hast du geschrieben, dass die Bilder "perfekt in die vorgegebene Tabelle passen" müssen. Wenn du Bilder mit unterschiedlichen Seitenverhältnissen in ein Raster einsortieren möchtest, gibt es 2 Möglichkeiten. Entweder du zeigst alle Bilder komplett, dann erhöht oder verbreitert sich natürlich das entsprechende Feld im Raster, oder du füllst das Feld aus und der überschüssige Rand des Bildes wird abgeschnitten. Das ist bei so marginalem Unterschied der Verhältnisse in der Regel nicht tragisch.

Natürlich könntest du die Bilder auch verzerrt anzeigen, dann geht das. Ich gehe aber mal nicht davon aus, dass du das willst.

Ich persönlich finde geringe Teile des Bildes abschneiden nicht so wild, wenn es allerdings unumgänglich ist, so wirst du kein sauberes Raster generieren können, das ist pure Logik.

Ich würde da mit den viewport-Angaben von CSS arbeiten. Das hat dne Vorteil, dass man mit Seitenverhältnissen arbeiten kann. 100vw entspricht 100% des viewports (Javascript window-Objekt), kann aber auch als Höhe angegeben werden.

Wenn der Container 100vw breit ist, kann die Höhe für deine Seitenverhätnisse ermitteln:

Code: 
100vw / 16 * 9 = 56,25
100vw / 15 * 10 = 66,67
Großzügig gerundet bietet sich als Mittelwert der genannten Verhältnisse 60vw für die Höhe an.
HTML: 
<div id="wrapper">
    <div class="big"></div>
    <div class="small"></div>
    <div class="small"></div>
    <div class="small"></div>
    <div class="small"></div>
    <div class="middle"></div>
    <div class="small"></div>
</div>
CSS: 
* {
    margin: 0;
    padding: 0;       
}

#wrapper {
    width: 100vw;
    height: 30vw;
    background: #ffb1e8;
}

#wrapper div {
    box-sizing: border-box;
    border: 1px solid black;
}

.big {
    width: calc(100vw / 2);
    height: calc(30vw);
    float: left;
}

.small {
    width: calc(100vw / 6);
    height: calc(30vw / 3);
    float: left;
}

.middle {
    width: calc(100vw / 3);
    height: calc(30vw / 1.5);
    float: right;
}
Damit hast du schon dein Raster. Wenn du jetzt noch mit background-Eigenschaften hantierst, passen deine Bilder fast perfekt hinein:
CSS: 
#wrapper div {
    box-sizing: border-box;
    background-repeat: none;
    background-size: cover;
}
Hier zu testen: jsfiddle

Um zum Beispiel dynamisch einen Rahmen hinzuzufügen braucht es dann ein Script in die Richtung:
HTML: 
Border: 0 <input type="range" min="0" max="5" step="0.5" id="gap"> 5
Code: 
$("#gap").change(function(){
    var wrapperViewportWidth = Math.round($("#wrapper").width() / $(window).width() * 100);
    var wrapperViewportHeight = Math.round($("#wrapper").height() / $(window).width() * 100);
    var margin = parseFloat(this.value);

    $("#wrapper div").css("margin", margin);
    $(".big").css({
        "width": "calc("+ wrapperViewportWidth +"vw / 2 - "+ margin * 2 +"px)",
        "height": "calc("+ wrapperViewportHeight +"vw - "+ margin * 2 +"px)",
    });

    $(".small").css({
        "width": "calc("+ wrapperViewportWidth +"vw / 6 - "+ margin * 2 +"px)",
        "height": "calc("+ wrapperViewportHeight +"vw / 3 - "+ margin * 2 +"px)",
    });

    $(".middle").css({
        "width": "calc("+ wrapperViewportWidth +"vw / 3 - "+ margin * 2 +"px)",
        "height": "calc("+ wrapperViewportHeight +"vw / 1.5 - "+ margin * 2 +"px)",
    });
});
Hier zu testen: jsfiddle

Deine Punkte schließen sich leider teilweise gegenseitig aus aber so etwas wäre immerhin ein guter Kompromiss.

Die Optimierung fürs Handy sollte dir nicht zu schwer fallen und auch eventuelle Abstände mit einzurechnen ist nicht schwer.
 
na das sieht doch schonmal sehr gut aus...

nein meine Vorgaben widersprechen sich nicht was ich lediglich vergessen habe mit anzugeben ist, dass NATÜRLICH die Bilder abgeschnitten werden MÜSSEN... deshalb muss ein Verhältnis gewählt werden bei dem die maximalste Höhe auf minimalster Breite passt und alle breiteren Bilder werden einfach "gleichmäßig" rechts und links beschnitten!

ebenso gefällt mir der "code-aufwand" ... das hier schaut alles sehr "gemütlich" aus :)

Vielen Dank

*TOP*

Ich werde das mal für mich umsetzen und auch die Übergangseffekte einplanen... falls noch fragen aufkommen werde ich diese hier Posten.


... leider sehe ich noch am Windows Smartphone (Browser EDGE) einen kleinen Fehler... werd ich vermutlich aber auch beheben können...
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück