CSS Responsive mit Odd Layout

Question

Ich habe einen Client für eine sehr seltsame Anfrage (für mich).

Ok, also habe ich 3 Bilder. Alle verschiedenen Größen. Sie wollen sie in einem eingewickelten Behälter, gleiche Höhe. Bilder unten, Text unten.

Nun, dies zu tun ist einfach ... bis Sie zum reaktionsschnellen Teil kommen.

Diese Seite: http://www.neilcramerphotography.com/

Vollbild, sie ok aussehen (noch mit ihm arbeiten). Aber sobald Sie die Größe des Bildschirms ändern (was ich vorausgesehen habe), wird das Layout alle wackelig.

Ich muss nur um die ersten 6 Bilder kümmern, Ruhe ist Set-Design.

Egal was ich tue oder benutze, es gibt eine Art feste Zahl. Ich muss für jede der ersten zwei Zeilen eine feste Höhe festlegen. Versuchte Polsterung. Frustriert, weil ich die meisten Probleme normalerweise lösen kann. Einfach stecken. Und wenn es NICHT machbar ist. Ich brauche andere, die das sagen. Leute glauben mir nie, also :)

Ich muss vielleicht Prozentsätze stattdessen versuchen.

Ich wünsche, dass die Leute verstehen, nicht alles, was Sie auf Papier tun, kann nicht immer leicht zu etwas wie diese ohne Probleme umgewandelt werden. Ein Layout von einem anderen Designer, der CSS nicht kennt.

Vielen Dank im Voraus.

Answer 1

add box-sizing: border-box zu Ihrem .woo_category_subs

Ist das, was Sie fragen?

Answer 2

Sind sie offen für eine Bibliothek von Drittanbietern? Ich würde persönlich Twitter Bootstrap empfehlen. Es ist ein sehr mächtiger, skalierbarer Rahmen. Zusätzlich zu Karussells, Navbars, Glyphicons, Accordians und einer Reihe anderer Doodads unterstützt es eine ansprechende Bildgrößenanpassung durch ein Breakpoint-basiertes Gittersystem. Ich verwende es auf meinem persönlichen website and blog, mit dem Sie die Reaktionsfähigkeit von Google Chrome Inspektor testen können (zugänglich in jedem Browser mit STRG + UMSCHALT + I). Ein Beispiel für ein ansprechendes Bild von meiner Website unter:

<div class="col-lg-2 col-sm-3 col-xs-4"> 
    <a class="linkPic" href="mailto:james.jm.taylor@gmail.comSubject=Nice%20website!" 
    title="My Email" target="_top" rel="external"> 
    <img class="img-responsive" src="images/mail.jpg" alt="Email me"> 
    </a> 
</div> 

Die Magie zum ersten div-Tag in der Klassendeklaration geschieht. Insbesondere "col-lg-2 col-sm-3 col-xs-4". Was das bedeutet, ist eine Anwendung einer Bootstrap-CSS-Größenregel, die das Bild auf 1/6 Bildschirmgröße auf Desktops, 1/4 auf Tablets und 1/3 auf Smartphones skaliert (das Bootstrap-Grid ist 12 Spalten breit und lg, sm , und xs corespond jeweils auf Desktop, Tablet und Smartphone).

Hoffe, das hilft.