zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Wie Bilder automatisch skalieren und später umbrechen bei resonsive Webdesign ?

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 07.09.2012, 07:54
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 18.01.2008
Beiträge: 13
iceman_fx befindet sich auf einem aufstrebenden Ast
Standard Wie Bilder automatisch skalieren und später umbrechen bei resonsive Webdesign ?

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%;
}
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 07.09.2012, 08:32
Benutzerbild von Marcus
Neuer Benutzer
neuer user
 
Registriert seit: 09.12.2004
Beiträge: 19
Marcus befindet sich auf einem aufstrebenden Ast
Standard

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
__________________
---
http://www.webdesign-haas.de - Individuelle Webseiten
http://www.m-cms.de - Mein Redaktionssystem
Mit Zitat antworten
Sponsored Links
Antwort

Stichwörter
bild, responsive design, skalierung

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
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


Alle Zeitangaben in WEZ +2. Es ist jetzt 02:09 Uhr.