XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   CSS (http://xhtmlforum.de/forumdisplay.php?f=73)
-   -   Zwei Bilder nebeneinander, sollen kleiner werden! (http://xhtmlforum.de/showthread.php?t=70504)

cecyle 12.01.2014 03:14

Zwei Bilder nebeneinander, sollen kleiner werden!
 
Hallo zusammen,

ich möchte gerne zwei Bilder die sich in einem DIV befinden, in einem Wrap-DIV mit der Fenstergröße (Responsive) schrumpfen lassen.

Aktuell sieht es so aus:

xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
x BILD BILD x BILD BILD x....................................x
x BILD BILD x BILD BILD x.....HEADLINE .................x
x BILD BILD x BILD BILD x.....TEXT TEXT TEXT TEXT..x
x BILD BILD x BILD BILD x.....TEXT TEX TEXT TEXT.. x
x BILD BILD x BILD BILD x...................................x
x BILD BILD x BILD BILD x...................................x
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx


Die Bilder werden von einem DIV mit dem Wert "float:left" umfasst.

Der Text daneben ist ebenfalls von einem DIV eingeschlossen.

Aktuell schrumpft nur der Text mit und platziert sich unter den Bilder.

Wenn das Fenster noch kleiner wird rutschen die Bilder untereinander und rechts bleibt ein großer Platzhalter. Ich möchte aber das das beide Bilder nebeneinander bleiben und bei MAX-größer (aktuell bei 625px) nebeneinander, zusammen kleiner werden.

Hat jemand eine Ahnung wie ich sowas realisieren kann?

Die Bilder in ein Bild zusammenzufassen ist leider nicht möglich, da beide Bilder per Loop generiert werden.

Würde mich über eine Antwort freuen!

LG,
Sam

Manfred62 12.01.2014 19:20

das sollte mit media-queries gehen. Einfaches Beispiel:
HTML-Code:

<!DOCTYPE html>
<html lang="de">
<head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style type="text/css">
        /* PocketGrid, http://arnaudleray.github.io/pocketgrid/ */
        .block-group, .block, .block-group:after, .block:after, .block-group:before, .block:before {
                -webkit-box-sizing: border-box;
                -moz-box-sizing: border-box;
                box-sizing: border-box;
        }
        .block-group {
                *zoom: 1;
        }
        .block-group:before, .block-group:after {
                display: table;
                content: "";
                line-height: 0;
        }
        .block-group:after {
                clear: both;
        }
        .block-group {
                list-style-type: none;
                padding: 0;
                margin: 0;
        }
        .block-group > .block-group {
                clear: none;
                float: left;
                margin: 0 !important;
        }
        .block {
                float: left;
                width: 100%;
        }
        /* ------ */
        * {
                margin: 0;
                padding: 0;
                font: 100%/1.5 sans-serif;
        }
        .main {
                max-width: 960px;
                margin: 0 auto;
                border: 1px solid #ccc;
        }
        .wrap {
                width: 50%;
        }
        .img {
                width: 50%;
        }
        img {
                max-width: 100%;
                height: auto;
                vertical-align: bottom;
        }
        .img, p {
                padding: 1em;
        }
        @media only screen and (max-width: 700px) {
                .wrap {width: 100%;}
        }
        </style>
</head>
<body>
        <div class="main block-group">
                <div class="wrap block">
                        <div class="img block"><img src="http://placehold.it/300x100/0eafff/ffffff.png" alt=""></div>
                        <div class="img block"><img src="http://placehold.it/300x100/0eafff/ffffff.png" alt=""></div>
                </div>
                <div class="wrap block">
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet, odit, voluptates quaerat nostrum cupiditate neque tempore repudiandae!</p>
                </div>
        </div>
</body>
</html>



Alle Zeitangaben in WEZ +2. Es ist jetzt 13:51 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2024, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2023