Responsive Images - Bilder automatisch skalieren (Mobile Device)

on Montag, 28 Januar 2013. Posted in Allgemeines Web

In wenigen Schritten zum responsive Image!

Responsive Images - Bilder automatisch skalieren (Mobile Device)

Eine mobiltaugliche Webseite wird im heutigen Smarthphone Alter immer wichtiger.

Fertige Scripte oder CMS Systeme sind schon "Responsive". Doch was bedeutet das eigentlich?

Responsive Design wird oft falsch verstanden. Es wird oft als eine Art App angesehen. Ist es aber nicht! Responsive Design bedeutet "ansprechendes Design" oder wie wir sagen, anpassendes Design.
Diesen Namen erhält es durch seine, sich am Browser Breite anpassende,:auto Werte.

Doch wie schaffe ich nun mein Bild / Bilder responsive zu bekommen?

Eine mobiltaugliche Webseite wird im heutigen Smarthphone Alter immer wichtiger.

Fertige Scripte oder CMS Systeme sind schon "Responsive". Doch was bedeutet das eigentlich?

Responsive Design wird oft falsch verstanden. Es wird oft als eine Art App angesehen. Ist es aber nicht! Responsive Design bedeutet "ansprechendes Design" oder wie wir sagen, anpassendes Design.
Diesen Namen erhält es durch seine, sich am Browser Breite anpassende,:auto Werte.

Doch wie schaffe ich nun mein Bild / Bilder responsive zu bekommen?

Ganz einfach: Ersteres fügen wir einfach eine kleine CSS-Klasse Namens amensic-image-wrapper zu der entsprechenden CSS File hinzu die wie folgend aussieht:

________________________________________

.amensic-image-wrapper{
max-width:90%;
height:auto;
position: relative;
display:block;
margin:0 auto;
}
.amensic-image-wrapper img{
width:100% !important;
height:auto !important;
display:block;
}

Oft findet man im Netz die Aussage, dass man height:100% stellen soll. Diese Aussage ist aber falsch!
________________________________________

Anschließend fügen wir der entsprechenden Bild-Datei die div Klasse hinzu die wie folgt aussieht:

<div class="amensic-image-wrapper">
<img src="http://www.IhreSeite/IhrBild.jpg" />
</div>

Kommentare (0)

Bitte Kommentar schreiben

Sie kommentieren als Gast.