zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Zwei Bilder nebeneinander, sollen kleiner werden!

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 12.01.2014, 03:14
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 30.01.2013
Ort: München
Beiträge: 33
cecyle befindet sich auf einem aufstrebenden Ast
Standard 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

Geändert von cecyle (12.01.2014 um 03:18 Uhr)
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 12.01.2014, 19:20
Benutzerbild von Manfred62
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2009
Ort: Ludwigsburg
Beiträge: 2.134
Manfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nett
Standard

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>
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Hintergrund wird nicht angezeigt maxx CSS 6 14.10.2012 19:27
Hilfe!!! mein Homepagelayout funktioniert nicht! maxx CSS 5 14.10.2012 08:21
Drei Bilder mit etwas Abstand nebeneinander anordnen web334 CSS 3 05.02.2012 16:09
Bilder nebeneinander ohne Leerraum darstellen? cyprus CSS 13 19.10.2007 01:18
Bildergalerie mit Bildunterschrift, Bilder nebeneinander CvH (X)HTML 5 07.08.2006 21:41


Alle Zeitangaben in WEZ +2. Es ist jetzt 07:26 Uhr.