Wie Bilder automatisch skalieren und später umbrechen bei resonsive Webdesign ?

iceman_fx · #1 (**permalink**) 07.09.2012, 07:54

Hi Leute,

ich erstelle gerade meine Homepage komplett neu und mache diese dabei gleich fit für mobile Endgeräte.
Soweit bin ich auch durch, habe jedoch noch ein kleines Problem/Eigenart bei meinen Bildern.

Ich habe einen Bild-Textblock (Bild, h2, Text), welchen ich in undefinierter Menge platziere.
Dabei ist es aktuell so eingestellt, dass immer 2 Stk. nebeneinander passen.

Reicht der Platz nun nicht aus, liegen diese korrekt untereinander (z.B. Smartphone).

Allerdings möchte ich dies etwas anders, um z.B. bei einer mittleren Auflösung (z.B. bei 700px Browserbreite) die Bilder jeweils erst kleiner skalieren (bis zu einem definierten Minimum) und danach erst umzubrechen.

Jedoch bekomme ich dies nicht hin.
Er bricht immer zuerst um und skaliert danach, wenn der browser zu schmal ist.

Was mache ich falsch oder geht dies vielleicht gar nicht zu machen - es sei denn ich nutze eine Unmasse an media-queries für verschiedenste Breiten ?

Gruß und danke.
iceman

HTML-Blöcke

HTML-Code:

...
    <div class="panorama">
        <div class="panoimg">
                        	<a href="http://www.domain.com/_pano1/" target="_blank" title="Mobile ready - anklicken zur Ansicht..." class="floatbox panomobi"></a>
			            <a href="http://www.domain.com/_pano1/" target="_blank" title="anklicken zur Ansicht..." class="floatbox"><img src="index.php?rex_resize=380w__pano1.jpg" width="" height="" border="0" alt="" /></a>
        </div>
        <h2>Pano 1</h2>
        <div class="panodesc"><p>2 Panoramen vom exakt gleichen Standpunkt bilden hierbei ein "720° Panorama" ab.</p></div>    </div>

	        
    <div class="panorama">
        <div class="panoimg">
                        	<a href="http://www.domain.com/_pano2/" target="_blank" title="Mobile ready - anklicken zur Ansicht..." class="floatbox panomobi"></a>
			            <a href="http://www.domain.com/_pano2/" target="_blank" title="anklicken zur Ansicht..." class="floatbox"><img src="index.php?rex_resize=380w__pano2.jpg" width="" height="" border="0" alt="" /></a>
        </div>
        <h2>Pano 2</h2>
        <div class="panodesc"><p>Die Erlebniswelt im Stadtpark.</p></div>    </div>
...

CSS

Code:

/* Panoramablock mit Floatbox */
.panorama {
	margin: 0px;
	padding: 0px;
	width: auto;
	max-width: 396px;
	overflow: hidden;
	float: left;
	margin-top: 30px;
	margin-right: 15px;
	margin-bottom: 0px;
	margin-left: 15px;
}
.panorama .panoimg {
	position: relative;
	width: auto;
	max-width: 380px;
	max-height: 107px;
	overflow: hidden;
	border: 8px #FFF solid;
}
	.panorama .panoimg a.panomobi {
		background-image: url(mobileready.png);
		background-repeat: no-repeat;
		background-position: left bottom;
		margin: 0px;
		padding: 0px;
		height: 100%;
		width: 40px;
		position: absolute;
		z-index: 10;
		left: 0px;
		bottom: 0px;
	}
	.panorama .panoimg img {
		width: 100%;
		max-width: 380px;
	}
.panorama h2 {
	font-size: 110%;
	font-weight: bold;
}
.panorama .panodesc {
	font-size: 90%;
}

Marcus · #2 (**permalink**) 07.09.2012, 08:32

Das müsste mit CSS3 möglich sein:

Code:

@media screen and (max-width:700px) {
  img (width:100px;)
}

oder so ähnlich.

Siehe: Geräteabhängige Stilvorgaben mit CSS Media Queries

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Bilder und Hintergrundbilder unproportional skalieren	Jormungand	CSS	9	19.03.2012 19:43
Browser skalieren > IE kachelt meine Bilder	dr_colossos	CSS	6	12.10.2011 18:09
Bilder ohne Verzerrung skalieren	SpecialFighter	(X)HTML	8	20.08.2011 00:43
Hintergrundbild je nach Text automatisch skalieren	wave	CSS	8	02.11.2008 20:39
Bilder im Text automatisch unterbringen	Steakfred	Offtopic	1	12.05.2008 20:38